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

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

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

例如.如果图像大小为200px×150px,transform:translate(-50%, -50%)则计算为平移(-100px,-75px).%unit有助于我们拥有各种尺寸的图像.

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

道歉花了太长时间来解释!

阅读更多资源:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

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

使用max-widthCSS的属性,如下所示:

img{
  max-width:100%;
}

Answer 4

对我来说，不使用绝对位置的最简单方法是翻译。

<div class="img-container">
 <img src="yoururl" />
</div>

CSS 应该是这样的：

.img-container {
 height:100px;
 width:100px;
 overflow:hidden;
}
.img-container > img {
width:100%;
height:100%;
object-fit:cover;
}

Answer 5

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

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