How can I resize an image dynamically with CSS as the browser width/height changes?

I wonder how I could make an image resize along with the browser window, here is what I have done so far (or download the whole site in a ZIP).

This works okay in Firefox, but it has problems in Chrome: the image does not always resize, it somehow depends on the size of the window when the page was loaded.

This also works okay in Safari, but sometimes the image is loaded with its minimum width/height. Maybe this is caused by the image size, I am not sure. (If it loads okay, try to refresh several times to see the bug.)

Any ideas on how could I make this more bulletproof? (If JavaScript will be needed I can live with that, too, but CSS is preferable.)

471487 次浏览
小开

你在用 jQuery 吗？

因为我在 jQuery 插件上做了一个快速搜索，他们似乎有一些插件可以做到这一点，检查一下这个，应该可以工作:

http://plugins.jquery.com/project/jquery-afterresize

编辑:

这是 CSS 解决方案，我只是添加了一个 Style = “ width: 100%”，并为我工程至少在铬和 Safari。我没有 ie，所以只要测试那里，让我知道，这里的代码:

            <div id="gallery" style="width: 100%">
<img src="images/fullsize.jpg" alt="" id="fullsize" />
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
</div>
小开 
window.onresize = function(){
var img = document.getElementById('fullsize');
img.style.width = "100%";
};

In IE onresize event gets fired on every pixel change (width or height) so there could be performance issue. Delay image resizing for few milliseconds by using javascript's window.setTimeout().

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

小开

这个 可以使用纯 CSS 完成，甚至不需要媒体查询。

To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

来源: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

如果你想实施一个固定的最大宽度的图像，只需要把它放在一个容器中，例如:

<div style="max-width:500px;">
<img src="..." />
</div>

JSFiddle 示例 。不需要 JavaScript。可以在最新版本的 Chrome、 Firefox 和 IE 中工作(这是我测试过的所有版本)。

小开

将 resize 属性设置为这两个属性。然后您可以像下面这样更改宽度和高度:

.classname img{
resize: both;
width:50px;
height:25px;
}
小开

您可以使用 CSS3scale属性来调整图像的大小与 css:

.image:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

Further Reading:

小开

最初，我使用了以下 html/css:

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

<div>
<img src="..." />
</div>

Then I added class="img" to the <div> like this: 

<div class="img">
<img src="..." />
</div>

一切都开始顺利进行。

小开

2018年及以后的解决方案:

使用 viewport 相对单位应该会让你的生活方式更容易，因为我们有一个猫的图像:

cat

现在，我们希望在代码中加入这只猫，同时考虑到方面比:

img {
width: 100%;
height: auto;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

So far not really interesting, but what if we would like to change the cats width to be the maximum of 50% of the viewport?

img {
width: 100%;
height: auto;
/* Magic! */
max-width: 50vw;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

The same image, but now restricted to a maximum width of 50vw vw (=viewport width) means the image will be X width of the viewport, depending on the digit provided. This also works for height:

img {
width: auto;
height: 100%;
max-height: 20vh;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

This restricts the height of the image to a maximum of 20% of the viewport.

小开

Just use this code. What most are forgeting is to specify max-width as the max-width of the image

img {
height: auto;
width: 100%;
max-width: 300px;
}
小开

试试看

.img{
width:100vw; /* Matches to the Viewport Width */
height:auto;
max-width:100% !important;
}

只适用于显示块和内联块，这对 Flex 项没有影响，因为我已经花了很多时间试图找出这一点。


提交答案