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

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 宽度和高度属性中也不起作用。我无法更改 img 标签的像素值。所以我尝试从 jquery 更改 px 值。我知道这也是有用的。但是是否可以根据以下代码或类似的方式进行修复？

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

这意味着我想访问包含图像和属性的部分的宽度和高度，该部分图像具有 yourImgID 属性。调整浏览器大小时，图像大小将自动减小。 我发现了很多关于这个案例的媒体查询建议。媒体查询适合浏览器中的图像，但尺寸不能减小。如何动态更改图像尺寸？欢迎提出建议和想法。

Answer 1

对 google 页面速度见解持保留态度。它们并不总是实用的。

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

如果可以的话，Google 还为 apache 和 nginx 提供 PageSpeed 模块：https://developers.google.com/speed/pagespeed/module

此模块将在向客户端发送内容之前在服务器上进行一些优化。

Answer 2

将您的图像更改为 div 的 background-image，然后 div 应该会自动缩放。

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

请注意，您的 div 应该是响应式的。