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

我厌倦了搜索html图像标记维度。我使我的网站完全响应。网站的图像和div会根据屏幕大小重新调整大小。当我在google PageSpeed中查看我的网站时，它要求我在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>

在这种情况下，媒体查询和html宽度和高度属性中的百分比都不起作用。我无法更改img标记的像素值。所以我尝试从jquery更改px值。我知道这也是有用的。但是，是否可以按照以下代码或类似的方式进行修复

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

var windowWidth=$（“节添加”）.width（）；
var windowHeight=$（“节添加”）.height（）；
$（'yourImgID'）.attr（'width'，windowWidth）；
$（'yourImgID'）.attr（'height'，windowHeight）；

这意味着我想访问包含image的部分的宽度和高度，以及具有yourImgID属性的该部分图像的attr。调整浏览器大小时，图像大小将自动减小。

---

我通过媒体查询发现了很多关于这个案件的建议。媒体查询适合浏览器中的图像，但无法降低维度。如何动态更改图像维度？欢迎提出建议和想法。

将您的图像更改为div的

背景图像

，然后

div

应自动缩放

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

---

请注意，您的

div

应该具有响应性。

对谷歌页面速度洞察持保留态度。它们并不总是实用的

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

谷歌还为apache和nginx提供了PageSpeed模块，如果可以的话：

---

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

感谢您的回答，您的技巧奏效了。但是一个缺点是它增加了太多的内联css。图像是动态的，我的意思是图像是从php代码生成的。因此，没有使用内联css的选项

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

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