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

Question

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

写代码

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

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

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

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

Answer 2

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

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

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

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

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

how to resize image dimension when browser resize?

html

jquery

image

window-resize

responsive-design