我有一个用于大屏幕的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">
答案 0 :(得分:3)
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/
答案 1 :(得分:1)
我没有看到任何错误。事实上,这是一种公认的技术,可以减少页面加载时间并在移动设备上保持页面大小(当然,只提供您只需加载设备大小所需的图像)。
另请注意,作为我可以看到的唯一潜在缺陷,只需将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
}
}