html - 相同的 img 在 html 中有两种尺寸

Question

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

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/