100

我试图弄清楚如何重新调整图像的大小，以使其保持宽度与高度的比率，但会重新调整大小，直到图像的高度与包含的 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%;
}

如您所见，图像父容器上显示灰色，根本不应该显示。为了使该容器完全装满，宽度需要在两侧均等地溢出。这可能吗？是否也可以解释太高的图像？

4

6 回答 6

99

原答案：

如果你准备好选择 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位置。意味着将图像从顶部向左推 50%，以确保原点取自 DIV。左/上单位是从父单位测量的。left:50%top:50%

神奇时刻：

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

现在，translateCSS3transform属性的这个功能移动/重新定位有问题的元素。此属性处理应用的元素，因此值 (x, y) OR (-50%, -50%) 表示将图像负片向左移动图像大小的 50%，并将负片顶部移动图像大小的 50% .

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

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

抱歉花了太长时间来解释！

阅读更多资源：

于 2013-10-05T02:20:31.280 回答
47

更改您的代码：

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/

于 2013-10-05T02:02:31.250 回答
21

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

img{
  max-width:100%;
}
于 2016-12-27T16:55:18.807 回答
3

你可以使用弹性盒子..这将解决你的问题

.image-parent 
{
     height:33px; 
     display:flex; 
}
于 2020-09-20T17:52:35.357 回答
2

如果您选择答案的Shekhar K. Sharma，并且它几乎可以工作，您还需要添加到您的 thisheight: 1px;或 thiswidth: 1px;以确保必须工作。

于 2019-10-05T09:48:21.700 回答
0

如果您想要做的只是填充 div，这可能会对其他人有所帮助，如果纵横比不重要，那么它是响应式的。

.img-fill > img {
  min-height: 100%;
  min-width: 100%;  
}
于 2020-11-27T20:52:12.390 回答