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

I am tired of searching for html image tag dimension. I make my website fully responsive. Image and divs of the website are re-sized according to screen size. When I checked my website in google page speed, it asks me to specify image dimension in html. I cann't make image dimension responsive. When I search in google, many suggest it isn't necessary in html if you define image width and height in css. But google page speed warns when I remove image dimension. I write code according

我厌倦了搜索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>

I am able to fix this issue in desktop size using following code.

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

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

but how to change image dimension dynamically when browser re-sizing ? When I resize browser, Google page speed insights warns like this according browser width.

但是如何在浏览器重新调整大小时动态更改图像尺寸?当我调整浏览器大小时,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).

Neither media queries works in this case, nor percentage worked within html width and height attribute. I cannot change pixel values of img tag. So I try to change px values from jquery. I know it is also usefulness. But is it possible to fix according following code or any way like this ?

在这种情况下,媒体查询都不起作用,也没有在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>

It means I want to access width and height of section which contains image and attr to this section image which has yourImgID attribute. While resize browser, image size will be automatically decreased. I found many suggestion using media queries regarding this case. Media query fits images in browser, but dimension can't be decreased. How can I change image dimension dynamically ? Suggestion and ideas are heartily welcome.

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

2 个解决方案

#1

Take the google page speed insights with a grain of salt. They aren't always practical.

谷歌页面的速度见解与一粒盐。它们并不总是实用的。

Google is suggesting that if you're going to set a size of 729x74, you should save the image at that resolution instead of sending them a larger image and scaling it down.

谷歌建议如果你要设置729x74的大小,你应该以该分辨率保存图像,而不是发送更大的图像并缩小图像。

Google also offers a PageSpeed module for apache and nginx if that's an option: https://developers.google.com/speed/pagespeed/module

如果可以选择,Google还为apache和nginx提供了PageSpeed模块:https://developers.google.com/speed/pagespeed/module

This module will do some of these optimizations on the server before it sends content to the client.

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

#2

Change your image to be the background-image of a div, then that div should automatically scale.

将图像更改为div的背景图像,然后该div应自动缩放。

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

Note that your div should be responsive.

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

#1