CSS：如何设置相对于父高的图像大小？
我试图弄清楚如何调整图像的大小，以使其保持高宽比，但是要调整大小，直到图像的高度与包含div的高度匹配为止。我有这些非常大和很长的图像（屏幕截图），我想将它们放入200px宽，180px高的div中以进行显示，而无需手动调整图像的大小。为使外观更好看，图像的侧面需要溢出并用包含的div隐藏。这是我到目前为止的内容：
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%;
}
如您所见，图像父容器上显示灰色，根本不显示灰色。为了完全填充该容器，宽度需要在两侧均等地溢出。这可能吗？是否也可以考虑太高的图像？
原始答案：
如果您准备选择CSS3，则可以使用css3translation属性。根据更大的尺寸调整大小。如果您的高度大于容器的宽度，而宽度小于容器的宽度，则宽度将被拉伸到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%);
}
说明
DIV设置为relative位置。这意味着所有子元素都将从此DIV的起始位置获取起始坐标（原点）。
图像被设置为BLOCK元素，min- width/height两者都设置为100％意味着无论图像大小如何都应最小化其父图像的100％。min是关键。如果按最小高度计，图像高度超过了父代的高度，则没问题。它将查找最小宽度，并尝试将最小高度设置为父母的100％。两者都相反。这样可确保div周围没有缝隙，但图像始终较大并被裁剪overflow:hidden;
现在image，这个被设置为absolute与位置left:50%和top:50%。指从顶部和左侧推动图像50％，以确保原点来自DIV。左/上单位是从父级开始测量的。
魔术时刻：
transform: translate(-50%, -50%);
现在，此translateCSS3transform属性功能可移动/重新定位有问题的元素。此属性处理所应用的元素，因此值（x，y）或（-50％，-50％）意味着将图像负向左移动图像尺寸的50％，并向负向顶部移动图像尺寸的50％
。
例如。如果图片大小为transform:translate(-50%,-50%)200像素×150像素，则将计算为平移（-100px，-75px）。当我们拥有各种尺寸的图像时，％单位会有所帮助。
这只是找出图像质心和父DIV并进行匹配的一种棘手方法。
抱歉，解释时间过长！
-
我正在尝试弄清楚如何重新调整图像的大小，使其保持宽度与高度的比率，但会被重新调整大小，直到图像的高度与包含div的高度匹配。我有这些图像又大又长（屏幕截图），我想将它们放入200px宽度、180px高度的div中进行显示，而无需手动调整图像的大小。为了使其看起来不错，图像的侧面需要溢出并与包含div一起隐藏。这是我到目前为止所拥有的： http://jsfiddle.net/f9krj/2/ 超文
-
我在UIViewController的视图中有一个。我想要的是将它的高度设置为视图的三分之一，无论屏幕大小如何。我当然知道如何从代码中做到这一点。但是，如何仅使用情节提要/界面构建器来实现这一点呢？
-
在我的应用程序中，我添加了图像上传功能，它可以很好地处理除相机图像之外的所有图像，每当我从画廊浏览相机图像时，肖像图像旋转90度。下面是我的代码片段。有人能帮我吗？我遵循了很多教程，但它们在kikat中都很好。但当同一教程不适用于ics、jellybean等时。。
-
问题内容： 我正在尝试给div（位置：固定）的宽度为100％（与其父div有关）。但是我有一些问题 编辑： **第一个问题是通过使用继承解决的，但它仍然无法正常工作。我认为问题在于我正在使用多个采用100％/继承宽度的div。 福克斯的例子 和html 问题似乎是 固定元素始终采用window / document的宽度 。有人知道如何解决吗？ 我无法使用我的固定元素进行固定，因为我正在使用jSc
-
问题内容： 我在另一个div内有两个div，我想使用css将一个子div放在父div的右上角，另一个子div放在父div的底下。即，我想对两个子div使用绝对定位，但是将它们相对于父div而不是页面定位。我怎样才能做到这一点？ 范例html： 问题答案： 这工作，因为手段类似“使用，，，来定位自己相对于谁拥有最近的祖先或”。 因此，我们使have 和子代都有，然后使用和定位子代。
-
我在另一个div中有两个div，我想使用CSS将一个子div放置在父div的右上方，另一个子div放置在父div的底部。例如，我想对两个子div使用绝对定位，但是相对于父div而不是页面定位它们。我怎么能这么做？ HTML示例：