2

我有一个用于大屏幕的 img 和另一个用于小屏幕的 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">
4

2 回答 2

3

IMUO 我认为这不是一个好习惯，因为您要加载所有图像两次（然后隐藏）。如果您使用的是引导程序（或响应式页面），您可以使用该类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/

于 2016-03-23T15:27:44.343 回答
1

我看不出这有什么问题。事实上，它是一种公认​​的技术，可以减少页面加载时间并缩小移动设备上的页面大小（当然，前提是您只加载设备大小所需的任何图像）。

另请注意，作为我能看到的唯一潜在陷阱，简单地将 CSS 属性设置为display: none并不总是阻止图像加载（请参见此处：“显示：无”阻止图像加载吗？）

另一种方法是存储具有相同名称的图像，并添加一个小后缀或没有后缀（对于较大的图像）（几乎就像您在示例中一样），除了屏幕上只有 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
  }
}
于 2016-03-23T15:30:31.897 回答