随着浏览器宽度/高度的变化，如何使用 CSS 动态调整图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4684304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I resize an image dynamically with CSS as the browser width/height changes?
提问by depi
I wonder how I could make an image resize along with the browser window, hereis what I have done so far (or download the whole site in a ZIP).
我想知道如何使图像与浏览器窗口一起调整大小，这是我到目前为止所做的（或以 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.
这在 Firefox 中工作正常，但在 Chrome 中存在问题：图像并不总是调整大小，它以某种方式取决于加载页面时窗口的大小。
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.)
这在 Safari 中也可以正常工作，但有时图像以其最小宽度/高度加载。也许这是由图像大小引起的，我不确定。（如果加载正常，请尝试多次刷新以查看错误。）
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.)
关于如何使这个更防弹的任何想法？（如果需要 JavaScript，我也可以接受，但 CSS 更可取。）
回答by Kurt Schindler
This canbe done with pure CSS and does not even require media queries.
这可以通过纯 CSS 完成，甚至不需要媒体查询。
To make the images flexible, simply add
max-width:100%andheight:auto. Imagemax-width:100%andheight:autoworks in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to addwidth:auto\9for IE8.source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
要使图像灵活，只需添加
max-width:100%和height:auto。图像max-width:100%和height:auto工程在 IE7 中，但不能在 IE8 中（是的，另一个奇怪的 IE 错误）。要解决此问题，您需要width:auto\9为 IE8添加。来源：http: //webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
CSS:
CSS：
img {
max-width: 100%;
height: auto;
width: auto; /* ie8 */
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
如果你想强制固定图像的最大宽度，只需将它放在一个容器中，例如：
<div style="max-width:500px;">
<img src="..." />
</div>
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
这里的 JSFiddle 示例。不需要 JavaScript。适用于最新版本的 Chrome、Firefox 和 IE（这是我测试过的所有版本）。
回答by roberrrt-s
2018 and later solution:
2018年及以后的解决方案：
Using viewport-relative units should make your life way easier, given we have the image of a cat:
考虑到我们有一只猫的图像，使用视口相关单位应该会让你的生活更轻松：
Now we want this cat inside our code, while respecting aspect ratios:
现在我们希望在我们的代码中使用这只猫，同时尊重纵横比：
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?
到目前为止还不是很有趣，但是如果我们想将猫的宽度更改为视口的 50% 的最大值呢？
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 widthof 50vwvw (=viewport width) means the image will be X width of the viewport, depending on the digit provided. This also works for height:
相同的图像，但是现在限制在最大宽度的50vwVW（=视口宽度）指的图像将是X宽视口的，这取决于所提供的数字。这也适用于高度：
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.
这将图像的高度限制为最大视口的 20%。
回答by Shahid
window.onresize = function(){
var img = document.getElementById('fullsize');
img.style.width = "100%";
};
In IE onresizeevent 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().
在 IE 中onresize，每次像素更改（宽度或高度）都会触发事件，因此可能会出现性能问题。使用 javascript 的 window.setTimeout() 将图像大小调整延迟几毫秒。
http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
回答by fmoradi9
Set the resize property to both. Then you can change width and height like this:
将调整大小属性设置为两者。然后你可以像这样改变宽度和高度：
.classname img{
resize: both;
width:50px;
height:25px;
}
回答by Arthur Neves
Are you using jQuery?
你在使用 jQuery 吗？
Because I did a quickly search on the jQuery plugings and they seem to have some plugin to do this, check this one, should work:
因为我快速搜索了 jQuery 插件，他们似乎有一些插件可以做到这一点，检查这个，应该可以工作：
http://plugins.jquery.com/project/jquery-afterresize
http://plugins.jquery.com/project/jquery-afterresize
EDIT:
编辑：
This is the CSS solution, I just add a style="width: 100%", and works for me at least in chrome and Safari. I dont have ie, so just test there, and let me know, here is the code:
这是 CSS 解决方案，我只添加了一个style="width: 100%"，至少在 chrome 和 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>
回答by Rin
Initially, I was using the following html/css:
最初，我使用以下 html/css：
img {
max-width: 100%;
height: auto;
width: auto; /* ie8 */
}
<div>
<img src="..." />
</div>
Then I added class="img"to the <div>like this:
然后我添加class="img"到<div>这样的：
<div class="img">
<img src="..." />
</div>
And everything started to work fine.
一切都开始正常了。
回答by ShahRokh
You can use CSS3 scaleproperty to resize image with css:
您可以使用 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:
进一步阅读：
回答by Daniel Nyamasyo
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;
}
Check this demonstration http://shorturl.at/nBKVY
检查这个演示 http://shorturl.at/nBKVY
回答by Ryan Stone
Try
尝试
.img{
width:100vw; /* Matches to the Viewport Width */
height:auto;
max-width:100% !important;
}
Only works with display block and inline block, this has no effect on flex items as I've just spent ages trying to find out.
仅适用于显示块和内联块，这对弹性项目没有影响，因为我花了很长时间试图找出答案。
