Question

我有一个用于大屏幕的img和用于小屏幕的另一个。这是一个简单的选项，如果有效，但我不确定是否有一个很好的做法，在html中将相同的img放入不同的大小并隐藏一个没有显示？该选项还有其他问题吗？

CSS：

#small {
    display:none;
}

@media screen and (max-width: 630px) { 
#big { display:none; }
#small { display:block; }
}

HTML：

<img id="big" src="img/1-big.jpg">
<img id="small" src="img/1-small.jpg">

Answer 1

IMUO我认为这不是一个好习惯，因为你要加载所有图像两次（然后隐藏）。如果您使用的是bootstrap（或响应式页面），则可以使用类img-responsive或此类：

img {
    width: 100%;
    height: auto;
}

如果没有，你可以这样做：

/* For width smaller than 400px: */
body {
    background-image: url('1-big.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('1-small.jpg');
    }
}

这样做，您只需在需要时加载图像，并避免加载两次图像。另一个例子是背景图片：https://www.smashingmagazine.com/2013/07/simple-responsive-images-with-css-background-images/

Answer 2

我没有看到任何错误。事实上，这是一种公认的技术，可以减少页面加载时间并在移动设备上保持页面大小（当然，只提供您只需加载设备大小所需的图像）。

另请注意，作为我可以看到的唯一潜在缺陷，只需将CSS属性设置为display: none并不总是阻止加载图像（请参阅此处：Does "display:none" prevent an image from loading?）< / p>

替代方法是将图像存储为相同的名称，并添加小或不添加后缀（对于较大的图像）（几乎与您的示例中一样），除了在任何时候屏幕上都有1个html元素，并使用javascript修改路径。实施例;

// HTML ELEMENT
<img class='thumbnail' src='img/thumb.png'>

// JAVASCRIPT
if(window.innerWidth < 640){
  // This is for users with smaller screens, load the smaller image
  var imgs = document.getElementsByTagName('img');

  for(var i = 0; i < imgs.length; i++){
    var current = imgs[i].getAttribute('src');
    imgs[i].setAttribute('src', current + '-small.png');

    // THIS WOULDN'T WORK AS IS, AS IT WOULD PRODUCE '.png-small.png' 
    // AND IS INTENDED **ONLY** TO ILLUSTRATE A CONCEPT
  }
}

html中的两个大小相同的img

2 个答案: