Html CSS：图像具有“固定”高度、最大宽度并保持纵横比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21176336/
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
CSS: Image to have "Fixed" height, max-width, and maintain aspect ratio?
提问by Toadfish
I have a set of pictures, each with different heights and widths that I want to put into a divtag. I want the picture to try to have a fixed height, unless the width exceeds a fixed amount, whereby I want the height to shrink to maintain the aspect ratio. I tried:
我有一组图片，每张图片都有不同的高度和宽度，我想放入div标签中。我希望图片尝试具有固定的高度，除非宽度超过固定量，否则我希望高度缩小以保持纵横比。我试过：
.ArtistPic
{
height: 660px;
max-width: 720px;
}
This fixes the height but if the image goes beyond 720px width, it squishes the picture horizontally and does not maintain the aspect ratio. Suggestions?
这固定了高度，但如果图像超过 720px 宽度，它会水平挤压图片并且不保持纵横比。建议？
Edit: Maybe a better way of putting this is I'd like the picture to expand to one of those sizes and maintain the aspect ratio.
编辑：也许更好的表达方式是我希望图片扩展到这些尺寸之一并保持纵横比。
回答by joshhunt
Does this meet your needs?
这是否满足您的需求？
.ArtistPic {
max-width: 720px;
max-height: 660px;
}
See http://jsfiddle.net/7s9wnjse/1/.
见http://jsfiddle.net/7s9wnjse/1/。
Edit: Made answer simpler.
编辑：使答案更简单。
回答by Nicholas Hazel
Use background-size:cover;
用 background-size:cover;
Fiddle: http://jsfiddle.net/SinisterSystems/cukgh/3/
小提琴：http: //jsfiddle.net/SinisterSystems/cukgh/3/
.box {
float:left;
margin:15px;
width:100px;
height:100px;
background:url("http://www.hdwallpapers3g.com/wp-content/uploads/2014/01/Images-6.jpg");
background-size:cover;
}
回答by Deryck
This will give you what you want:
这会给你你想要的：
CSS
CSS
img {
width: auto; /* set to anything and aspect ratio is maintained - also corrects glitch in Internet Explorer */
height: auto; /* set to anything and aspect ratio is maintained */
max-width: 100%;
border: 0; /* for older IE browsers that draw borders around images */
}
View here and re-size the window to see.
在此处查看并重新调整窗口大小以查看。
Basically, just go get yourself a copy of Normalize.css.
基本上，只需给自己一份Normalize.css的副本即可。
回答by codeaddict
If the height is fixed, it wont maintain aspect ratio, Set them both to be the max that you want, and it will maintain the ratio.
如果高度是固定的，它不会保持纵横比，将它们都设置为您想要的最大值，它将保持比例。
.ArtistPic {
max-width: 720px;
max-height:660px;
}
Edit:
编辑：
Take a look at your image tags, they might have set width and height on them, If that is the case you will need to remove them.
看看你的图像标签，它们可能已经设置了宽度和高度，如果是这种情况，你需要删除它们。
<img src="image/path" width="250px" height="3005px" alt="valid image"/>
If it has width and height on it like that, you won't be able to fix with css.
如果它有这样的宽度和高度，你将无法用 css 修复。
