CSS：100% 宽度或高度同时保持纵横比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3751565/
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: 100% width or height while keeping aspect ratio?
提问by Weston Watson
Currently, with STYLE, I can use width: 100%and autoon the height (or vice versa), but I still can't constrain the image into a specific position, either being too wide or too tall, respectively.
目前，使用 STYLE，我可以在高度上使用width: 100%和auto（反之亦然），但我仍然无法将图像限制在特定位置，分别是太宽或太高。
Any ideas?
有任何想法吗？
采纳答案by Andrew
If you only define one dimension on an image the image aspect ratio will always be preserved.
如果您只在图像上定义一个维度，则图像纵横比将始终保持不变。
Is the issue that the image is bigger/taller than you prefer?
图像比您喜欢的更大/更高吗？
You could put it inside a DIV that is set to the maximum height/width that you want for the image, and then set overflow:hidden. That would crop anything beyond what you want.
您可以将它放在设置为图像所需的最大高度/宽度的 DIV 中，然后设置溢出：隐藏。这将裁剪超出您想要的任何内容。
If an image is 100% wide and height:auto and you think it's too tall, that is specifically because the aspect ratio is preserved. You'll need to crop, or to change the aspect ratio.
如果图像是 100% 宽和高度：自动，并且您认为它太高，那特别是因为保留了纵横比。您需要裁剪或更改纵横比。
Please provide some more information about what you're specifically trying to accomplish and I'll try to help more!
请提供更多有关您特别想完成的工作的信息，我会尽力提供更多帮助！
--- EDIT BASED ON FEEDBACK ---
--- 根据反馈进行编辑 ---
Are you familiar with the max-widthand max-heightproperties? You could always set those instead. If you don't set any minimum and you set a max height and width then your image will not be distorted (aspect ratio will be preserved) and it will not be any larger than whichever dimension is longest and hits its max.
你熟悉max-width和max-height属性吗？你总是可以设置这些。如果您没有设置任何最小值并设置了最大高度和宽度，那么您的图像将不会失真（纵横比将被保留）并且它不会大于最长的尺寸并达到其最大值。
回答by conca
Some years later, looking for the same requirement, I found a CSS option using background-size.
几年后，为了寻找相同的要求，我找到了一个使用 background-size 的 CSS 选项。
It is supposed to work in modern browsers (IE9+).
它应该在现代浏览器（IE9+）中工作。
<div id="container" style="background-image:url(myimage.png)">
</div>
And the style:
和风格：
#container
{
width: 100px; /*or 70%, or what you want*/
height: 200px; /*or 70%, or what you want*/
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
The reference: http://www.w3schools.com/cssref/css3_pr_background-size.asp
参考：http: //www.w3schools.com/cssref/css3_pr_background-size.asp
And the demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size
和演示：http: //www.w3schools.com/cssref/playit.asp?filename =playcss_background- size
回答by Adam Waite
By setting the CSS max-widthproperty to 100%, an image will fill the width of it's parenting element, but won't render larger than it's actual size, thus preserving resolution.
通过将 CSSmax-width属性设置为100%，图像将填充其父元素的宽度，但不会呈现大于其实际大小，从而保持分辨率。
Setting the heightproperty to automaintains the aspect ratio of the image, using this technique allows static height to be overridden and enables the image to flex proportionally in all directions.
设置height属性以auto保持图像的纵横比，使用此技术可以覆盖静态高度并使图像能够在所有方向按比例弯曲。
img {
max-width: 100%;
height: auto;
}
回答by user3334941
Simple elegant working solution:
简单优雅的工作解决方案：
img {
width: 600px; /*width of parent container*/
height: 350px; /*height of parent container*/
object-fit: contain;
position: relative;
top: 50%;
transform: translateY(-50%);
}
回答by Flo
Had the same issue. The problem for me was that the height property was also already defined elsewhere, fixed it like this:
有同样的问题。我的问题是 height 属性也已经在别处定义了，像这样修复它：
.img{
max-width: 100%;
max-height: 100%;
height: inherit !important;
}
回答by Alexis K
Simple solution:
简单的解决方案：
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;
By the way, if you want to center it in a parent div container, you can add those css properties:
顺便说一下，如果你想将它放在父 div 容器中，你可以添加这些 css 属性：
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
It should really work as expected :)
它应该真的按预期工作:)
回答by George Pligoropoulos
One of the answers includes the background-size: containcss statement which I like a lot because it is straightforward statement of what you want to do and the browser just does it.
答案之一包括background-size:contains css 语句，我非常喜欢它，因为它直接说明了您想要做什么，而浏览器只是这样做。
Unfortunately sooner or later you are going to need to apply a shadowwhich unfortunately will not play well with background image solutions.
不幸的是，迟早你将需要应用阴影，不幸的是，它与背景图像解决方案不能很好地配合。
So let's say that you have a container which is responsivebut it has well defined boundaries for min and max width and height.
因此，假设您有一个响应式容器，但它具有明确定义的最小和最大宽度和高度的边界。
.photo {
max-width: 150px;
min-width: 75px;
max-height: 150px;
min-height: 75px;
}
And the container has an img which must be aware of the pixels of the height of the container in order to avoid getting a very high image which overflows or is cropped.
并且容器有一个 img ，它必须知道容器高度的像素，以避免获得溢出或被裁剪的非常高的图像。
The img should also define a max-width of 100% in order first to allow smaller widths to be rendered and secondly to be percentage based which makes it parametric.
img 还应该定义 100% 的最大宽度，以便首先允许呈现较小的宽度，其次是基于百分比的，这使其具有参数化。
.photo > img {
max-width: 100%;
max-height: 150px;
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
box-shadow: 0 0 13px 3px rgba(0,0,0,1);
}
Note that it has a nice shadow ;)
请注意，它有一个很好的阴影；）
Enjoy a live example at this fiddle: http://jsfiddle.net/pligor/gx8qthqL/2/
在这个小提琴上享受一个活生生的例子：http: //jsfiddle.net/pligor/gx8qthqL/2/
回答by Alejandro Salamanca Mazuelo
I use this for a rectangular container with height and width fixed, but with images of different sizes.
我将它用于高度和宽度固定但图像大小不同的矩形容器。
img {
max-width: 95%;
max-height: 15em;
width: auto !important;
}
回答by Davy
Its best to use auto on the dimension that should respect the aspect ratio. If you do not set the other property to auto, most browsers nowadays will assume that you want to respect the aspect ration, but not all of them (IE10 on windows phone 8 does not, for example)
最好在应该尊重纵横比的维度上使用 auto 。如果您不将其他属性设置为自动，现在大多数浏览器会假设您要尊重纵横比，但不是所有浏览器（例如，Windows Phone 8 上的 IE10 不会）
width: 100%;
height: auto;
回答by bill davis
This is a very straightforward solution that I came up with after following conca's link and looking at background size. It blows the image up and then fits it centered into the outer container w/o scaling it.
这是一个非常简单的解决方案，我是在关注 conca 的链接并查看背景大小后提出的。它将图像炸开，然后将其居中放入外部容器中，无需缩放。
<style>
#cropcontainer
{
width: 100%;
height: 100%;
background-size: 140%;
background-position: center;
background-repeat: no-repeat;
}
</style>
<div id="cropcontainer" style="background-image: url(yoururl); />
