CSS:我怎样才能设置图像大小相对于父母的高度?

我想弄清楚如何重新调整图像的大小,使其保持宽高比,但重新resize直到图像的高度与包含div的高度相匹配。 我有这些相当大和很长的图像(截图),我想把它们放到一个200像素的宽度,180像素的高度div用于显示,而不需要手动重新调整图像大小。 为了使这看起来不错,图像的两侧需要溢出,并与包含div的隐藏。 这是我迄今为止:

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%; } 

正如你所看到的,图像父容器上显示灰色,根本不应该显示。 为了使该容器完全充满,宽度需要在两侧平均溢出。 这可能吗? 是否也可以解释也是太高的图像?

原始答案:

如果您准备selectCSS3,则可以使用css3 translate属性。 基于更大的尺寸进行调整。 如果您的身高较大,宽度小于容器宽度,则宽度将延伸至100%,高度将从两侧裁剪。 宽度也一样。

您的需要, 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> 

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%); } 

瞧! 工作: http : //jsfiddle.net/shekhardesigner/aYrhG/

说明

DIV被设置为relative位置。 这意味着所有的子元素将从DIV开始的位置得到起始坐标(起点)。

图像被设置为BLOCK元素, min-width/height设置为100%意味着调整图像的大小,而不pipe其大小为其父级的最小值的100%。 min是关键。 如果以最小高度,图像高度超过父母的身高,没有问题。 它会查找是否为最小宽度,并尝试将最小高度设置为父母的100%。 反之亦然。 这确保了div周围没有空白,但是图像总是比较大,并且被overflow:hidden;修剪overflow:hidden;

现在image ,这是设置为一个absolute位置, left:50%top:50% 。 意味着将图像从顶部推出50%,并确保原点取自DIV。 左/顶单位从父母测量。

魔法时刻:

transform: translate(-50%, -50%);

现在,CSS3 transform属性的这个translate函数移动/重定位一个有问题的元素。 该属性处理应用的元素,因此值(x,y)或(-50%,-50%)意味着将图像负向左移50%的图像大小,并向负向移动50%的图像大小。

例如。 如果图片尺寸是200px×150px, transform:translate(-50%, -50%)会计算翻译(-100px,-75px)。 %单位有帮助,当我们有不同大小的图像。

这只是一个棘手的方式来找出图像的质心和父DIV并匹配它们。

道歉花太长时间来解释!

阅读更多资源:

改变你的代码:

 a.image_container img { width: 100%; } 

对此:

 a.image_container img { width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that height: 100%; } 

http://jsfiddle.net/f9krj/5/

使用CSS的max-width属性。

有用

 img{ max-width:100%; }