Html CSS：如何设置相对于父高度的图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19192892/
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: How can I set image size relative to parent height?
提问by Jon McPherson
I am trying to figure out how to re-size an image so that it keeps it ratio of width to height, but gets re-sized until the height of the image matches the height of the containing div. I have these images that are pretty large and long (screenshots), and I want to put them into a 200px width, 180px height div for display and without re-sizing the images manually. To make this look good, the sides of the image need to overflow and be hidden with the containing div. This is what I have so far:
我试图弄清楚如何重新调整图像的大小以使其保持宽度与高度的比率，但会重新调整大小，直到图像的高度与包含的 div 的高度匹配。我有这些非常大和长的图像（屏幕截图），我想将它们放入 200 像素宽度、180 像素高度的 div 中进行显示，并且无需手动重新调整图像大小。为了使这看起来不错，图像的两侧需要溢出并用包含的 div 隐藏。这是我到目前为止：
HTML
HTML
<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
<img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>
CSS
CSS
a.image_container {
background-color: #999;
width: 200px;
height: 180px;
display: inline-block;
overflow: hidden;
}
a.image_container img {
width: 100%;
}
As you can see, there is grey color showing on the images parent container which should not be shown at all. In order for that container to be filled completely, the width needs to be overflowed equally on both sides. Is this possible? Is it also possible to account for an image that is also too tall?
如您所见，图像父容器上显示灰色，根本不应显示。为了使该容器完全填充，宽度需要在两侧均等地溢出。这可能吗？是否也可以考虑太高的图像？
采纳答案by Shekhar K. Sharma
Original Answer:
原答案：
If you are ready to opt for CSS3, you can use css3 translate property. Resize based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.
如果您准备选择 CSS3，则可以使用 css3 translate 属性。根据较大的调整大小。如果您的高度大于容器，宽度小于容器，则宽度将拉伸至 100%，高度将从两侧修剪。更大的宽度也是如此。
Your need, HTML:
你的需要，HTML：
<div class="img-wrap">
<img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/200/300/nature/" />
</div>
And CSS:
和CSS：
.img-wrap {
width: 200px;
height: 150px;
position: relative;
display: inline-block;
overflow: hidden;
margin: 0;
}
div > img {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
}
Voila! Working: http://jsfiddle.net/shekhardesigner/aYrhG/
瞧！工作：http: //jsfiddle.net/shekhardesigner/aYrhG/
Explanation
解释
DIV is set to the relativeposition. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.
DIV 设置到relative位置。这意味着所有子元素都将从该 DIV 开始处获得起始坐标（原点）。
The image is set as a BLOCK element, min-width/heightboth set to 100% means to resize the image no matter of its size to be the minimum of 100% of it's parent. minis the key. If by min-height, the image height exceeded the parent's height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;
图像被设置为一个 BLOCK 元素，min-width/height两者都设置为 100% 意味着调整图像大小，无论其大小是其父元素的100% 的最小值。min是关键。如果通过min-height，图像高度超过了父级的高度，没问题。它将寻找 if min-width 并尝试将最小高度设置为父级的 100%。反之亦然。这确保了 div 周围没有间隙，但图像总是有点大，并被修剪overflow:hidden;
Now image, this is set to an absoluteposition with left:50%and top:50%. Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.
现在image，这被设置为一个absolute位置left:50%和top:50%。意味着将图像从顶部向左推 50%，确保原点取自 DIV。左/上单位是从父级开始测量的。
Magic moment:
神奇时刻：
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Now, this translatefunction of CSS3 transformproperty moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.
现在，translateCSS3transform属性的这个函数移动/重新定位一个有问题的元素。此属性处理应用的元素，因此值 (x, y) OR (-50%, -50%) 表示将负片图像向左移动图像尺寸的 50%，并将负片顶部移动图像尺寸的 50% .
Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%)will calculated to translate(-100px, -75px). % unit helps when we have various size of image.
例如。如果图像大小为 200px × 150px，transform:translate(-50%, -50%)将计算为平移（-100px，-75px）。当我们有各种大小的图像时，% 单位会有所帮助。
This is just a tricky way to figure out centroid of the image and the parent DIV and match them.
这只是找出图像和父 DIV 的质心并匹配它们的一种棘手方法。
Apologies for taking too long to explain!
抱歉解释时间太长！
Resources to read more:
阅读更多资源：
回答by Jacques ジャック
Change your code:
更改您的代码：
a.image_container img {
width: 100%;
}
To this:
对此：
a.image_container img {
width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
height: 100%;
}
回答by UniCoder
Use max-widthproperty of CSS, like this :
使用max-widthCSS 的属性，如下所示：
img{
max-width:100%;
}
