CSS：如何设置图像大小相对于父高度？ [英] CSS: How can I set image size relative to parent height?

问题描述

我想弄清楚如何重新调整图片的大小，使其保持其宽度与高度的比率，但是重新调整大小，直到图片的高度与包含的div的高度相匹配。我有这些图像是相当大和长（屏幕截图），我想把它们放入一个200px宽，180px高度div显示和手动调整图像的大小。为了使它看起来不错，图像的两侧需要溢出并且被包含的div隐藏。这是我到目前为止：

http：/ /jsfiddle.net/f9krj/2/

HTML

 < a class =image_containerhref =http://www.skintype.ca/assets/background-x_large.jpg> 
< img src =http://www.skintype.ca/assets/background-x_large.jpgalt =/> 
< / a> 
  

CSS

< pre class =lang-css prettyprint-override> a.image_container {
background-color：＃999;
width：200px;
height：180px;
display：inline-block;
overflow：hidden;
}
a.image_container img {
width：100％;
}


正如你所看到的，不应该显示。为了使该容器被完全填充，宽度需要在两侧上相等地溢出。这可能吗？

解决方案

如果您已准备好选择CSS3，可以使用css3 translate属性。基于任何更大的大小调整大小。如果你的高度大于宽度小于容器，宽度将拉伸到100％，高度将从两侧修剪。

$ b

您需要 ：

 < div> 
< img src =http://lorempixel.com/300/160/nature//> 
< / div> 
< div> 
< img src =http://lorempixel.com/300/200/nature//> 
< / div> 
< div> 
< img src =http://lorempixel.com/200/300/nature//> 
< / div> 
  

和 CSS ：

  div {
 width：200px; 
 height：150px; 
 position：relative; 
 display：inline-block; 
 overflow：hidden; 
} 
 
 div> img {
 position：absolute; 
 top：50％; 
 min-height：100％; 
 display：block; 
 left：50％; 
 -webkit-transform：translate（-50％，-50％）; 
 min-width：100％; 
} 
  

Voila！工作： http://jsfiddle.net/shekhardesigner/aYrhG/

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:

http://jsfiddle.net/f9krj/2/

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

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?

解决方案

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.

Your need, HTML:

<div>
    <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div>
    <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div>
    <img src="http://lorempixel.com/200/300/nature/" />
</div>

And CSS:

div {
    width:200px;
    height:150px;
    position:relative;
    display:inline-block;
    overflow:hidden;
}

div > img {
    position:absolute;
    top:50%;
    min-height:100%;
    display:block;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    min-width:100%;
}

Voila! Working: http://jsfiddle.net/shekhardesigner/aYrhG/

这篇关于CSS：如何设置图像大小相对于父高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！