我正在设计一个响应式设计。
如果我使用图像标签加载图像，则尺寸没有问题，但是即使我设置display：none，它也将加载在屏幕上。这会导致智能手机设备上的加载问题...
这种方式我试图用background-size：contain来缩放它，但是问题是我必须为容器增加一个高度。
这意味着，如果我有一台宽度不同的设备，那么图像就不合适了。
background-size：cover有相同的问题。如果我更改宽度，图像就会溢出。
仅使用CSS即可完成此操作，因为图片很多，这会导致JavaScript加载问题。
#header {
width: 100%;
background-image:url(../images/backgrounds/Header_phone2.jpg);
background-size:contain;
background-repeat:no-repeat;
min-height: 200px;
}
在答案中用JS编辑我的解决方案，欢迎改进技巧
我现在做了一些事情，对我来说很好的工作。
我对jquery不太满意，因此我期待改进技巧。
HTML：
容器中的容器...
CSS几乎保持不变：
#header {
height:auto;
}
#header-image{
width: 100%;
min-height: 155px;
background-image:url(../bilder/backgrounds/Header_phone2.jpg);
background-size:cover;
background-repeat:no-repeat;
}
jQuery：
if ($( window ).width() <= 966) {
var screenwidth = $(window).width();
var heightimage = (screenwidth /940) * 198;
$("#header-image").css("height", heightimage);
}
$(window).resize(function() {
if ($( window ).width() <= 966) {
var screenwidth = $(window).width();
var heightimage = (screenwidth /940) * 198;
$("#header-image").css("height", heightimage);
}
});
这太棒了！就像您添加带有img标签的图像，并且图像不会在屏幕设计中加载一样。（在此处查看）
如果禁用了javascript，则设置min-heigth，像这样显示图像。
使用jQuery，我可以计算图像的高度。为此，我从显示器上获取宽度，将其除以图像宽度，然后乘以图像的高度。=>容器的正确高度。
使用windows-resize功能，您可以更改窗口的大小，并且仍然可以使用。
这非常简单，对我来说很好用。
单击以获取Jsfiddle。
如果您使用js脚本从img标记中删除src路径，那么它也会发送请求。使用此变体，您没有问题，请注意第一个链接。
一些熟练的人可以改善这一点：使用jquery选择图像的宽度和高度并创建函数。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句