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%; }
使用CSS的max-width属性。
有用
img{ max-width:100%; }
