仅在 md 屏幕上显示图像 - Html

在网页设计中，图像是重要的组成部分，但有时我们希望在某些屏幕上隐藏某些图像。本文将介绍如何使用HTML和CSS将图像限制在仅在特定屏幕大小下显示。

方法1：CSS中的@media查询

使用CSS的@media查询可以为不同的屏幕宽度定义不同的CSS规则。例如，以下代码将定义在宽度小于或等于768像素（手机和平板电脑）的屏幕上隐藏图像。

@media screen and (max-width: 768px) {
   img {
      display: none;
   }
}

这些规则将通过以下HTML代码应用于页面中显示的图像。

<img src="image.jpg" alt="my image" />

方法2：使用JavaScript

另一种仅在特定屏幕上显示图像的方法是使用JavaScript。例如，以下代码将使用JavaScript检测窗口宽度并根据需要隐藏图像。

<script>
  function checkWidth() {
    var image = document.getElementById('myImage');

    if (window.innerWidth <= 768) {
      image.style.display = 'none';
    } else {
      image.style.display = 'block';
    }
  }

  window.addEventListener('resize', checkWidth);
  checkWidth();
</script>

这些规则将通过以下HTML代码应用于页面中显示的图像。

<img src="image.jpg" alt="my image" id="myImage" />

结论

在此文中，我们介绍了两种方法来仅在特定屏幕上显示图像。CSS @ media查询和JavaScript检测窗口宽度是两种实现此目标的流行方法。选择适当的方法将取决于您的具体业务需求。