html中两种尺寸的相同img答案

【问题标题】：The same img in two sizes in the htmlhtml中两种尺寸的相同img
【发布时间】：2016-07-10 23:23:41
【问题描述】：

我有一个用于大屏幕的 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">

【问题讨论】：

根据您的浏览器兼容性要求，图片元素可能是您需要的：developer.mozilla.org/en/docs/Web/HTML/Element/picture
可能重复：stackoverflow.com/q/32161026/3597276

标签： html css media-queries responsive

【解决方案1】：

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/

【讨论】：

我更喜欢这段代码。但我读过背景图片应该仅用于装饰目的。如果 img 有意义，它应该在 html 中并在 alt 属性中带有描述。
确实如此。但我会（再次）推荐img-responsive 喜欢的风格。您加载一次图像，它会在各种尺寸的浏览器中缓慢响应（不仅在断点上）。如果您有响应式页面，这是最好的选择。

【解决方案2】：

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

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

另一种方法是使用相同的名称存储图像，并添加 small 或不添加后缀（对于较大的图像）（几乎就像您在示例中一样），除了只有任何时候在屏幕上都有 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
  }
}

【讨论】：