Question

我试图弄清楚如何重新调整图像的大小，使其保持宽度与高度的比例，但重新调整尺寸，直到图像的高度与包含div的高度相匹配。我有这些相当大而长的图像（截图），我想将它们放入200px宽度，180px高度的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%;
}

如您所见，图像父容器上显示灰色，根本不显示。为了使容器完全填满，宽度需要在两侧均匀溢出。这可能吗？是否也可以考虑一个太高的图像？

Answer 1

原始答案：

如果您准备选择CSS3，则可以使用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％意味着无论图像的大小是否为其父级的100％的最小值。 min是关键。如果按最小高度，图像高度超过父母的高度，没问题。它将查找是否为最小宽度并尝试将最小高度设置为父母的100％。两者都相反。这确保了div周围没有间隙，但图像总是更大，并被overflow:hidden;

修剪

现在image，此设置为absolute位置left:50%和top:50%。意味着将图像从顶部和左侧推动50％，确保原点来自DIV。左/上单位是从父母那里测量的。

神奇时刻：

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

现在，CSS3 translate属性的transform函数会移动/重新定位有问题的元素。此属性处理应用元素，因此值（x，y）OR（-50％， - 50％）表示将图像负向左移动50％的图像大小，并移动到负顶部图像大小的50％。

EG。如果图像大小为200px×150px，transform:translate(-50%, -50%)将计算为平移（-100px，-75px）。当我们有各种尺寸的图像时，％unit会有所帮助。

这只是弄清楚图像质心和父DIV并匹配它们的一种棘手方法。

道歉需要很长时间才能解释！

阅读更多内容的资源：

Answer 2

更改您的代码：

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/

Answer 3

使用CSS的max-width属性，如下所示：

img{
  max-width:100%;
}

Answer 4

您可以使用弹性盒。这将解决您的问题

.image-parent 
{
     height:33px; 
     display:flex; 
}

Answer 5

如果您使用answer's Shekhar K. Sharma，并且几乎可以正常工作，则还需要添加此height: 1px;或width: 1px;才能正常工作。

Answer 6

如果您要做的只是填充div，这可能会帮助其他人（如果长宽比不重要的话）会有所反应。

.img-fill > img {
  min-height: 100%;
  min-width: 100%;  
}

CSS：如何设置相对于父高度的图像大小？

6 个答案:

原始答案：

说明