Question

我厌倦了搜索html图片标签维度。我让我的网站完全响应。根据屏幕尺寸重新调整网站的图像和div。当我以谷歌页面速度检查我的网站时，它要求我在html中指定图像尺寸。我无法使图像尺寸响应。当我在谷歌搜索时，许多人建议如果你在CSS中定义图像宽度和高度，则不需要html。但是当我删除图片尺寸时谷歌页面速度会发出警告。我根据

编写代码

CSS

    #topbar section{
        float:left;
        width:100%;
        height:auto;
display:block;
}

#topbar section img{
    width:100%;
}

HTML

<div id="topbar">
<section>   
<img src="example.jpg" alt="">
</section>
</div>

我可以使用以下代码在桌面大小中解决此问题。

echo "<section><img src='../add/$add' width="985" height="100" alt='$add'></section>";

但是如何在浏览器重新调整大小时动态更改图像尺寸？当我调整浏览器大小时，Google页面速度见解会根据浏览器宽度发出警告。

http://krishisansar.com/add/news.gif is resized in HTML or CSS from 985x100 to 729x74. Serving a scaled image could save 79.7KiB (46% reduction).

在这种情况下，媒体查询都不起作用，也没有在html width和height属性中工作的百分比。我无法更改img标签的像素值。所以我尝试从jquery更改px值。我知道这也很有用。但是可以根据以下代码或任何类似的方式修复吗？

<script>
var windowWidth = $("section#add").width();
var windowHeight = $("section#add").height();
$('#yourImgID').attr('width',windowWidth);
$('#yourImgID').attr('height',windowHeight);
</script>

这意味着我想访问包含image和attr的部分的宽度和高度到具有yourImgID属性的此部分图像。调整浏览器大小时，图像大小将自动降低。我发现很多关于这种情况使用媒体查询的建议。媒体查询适合浏览器中的图像，但维度不能减少。如何动态更改图像尺寸？我们衷心欢迎您的建议和想法。

Answer 1

将图片更改为div的background-image，然后div应自动缩放。

#yourDivWithBackground {
    background-image: url(url/to/your/image.png);
    background-size: contain;
}

请注意，您的div应具有响应能力。

Answer 2

以谷歌的速度获取谷歌页面的速度。它们并不总是实用的。

谷歌建议，如果您要设置729x74的大小，则应该以该分辨率保存图像，而不是向他们发送更大的图像并将其缩小。

Google还为apache和nginx提供了PageSpeed模块，如果这是一个选项：https://developers.google.com/speed/pagespeed/module

在将内容发送到客户端之前，此模块将在服务器上执行其中一些优化。

如何在浏览器调整大小时调整图像尺寸？

2 个答案: