将一个未知大小的大图像置于较小的div内,并隐藏溢出

Question

我想在没有javascript和没有背景图像的div中居中一个img .

这是一些示例代码

<div> 
    <img src="/happy_cat.png"/> 
</div>

• 我不知道img的大小,它应该能够超过父级的宽度
• 我不知道父div的宽度(它是100%)
• 父div具有固定的高度
• 图像大于父图像,父图像溢出:隐藏
• 只需要支持现代浏览器

期望的结果.(忽略不透明等,只需注意定位).

我知道这可以通过背景图像轻松完成,但这对我来说不是一个选择.我也可以使用javascript,但它似乎是一个非常沉重的方式来实现这一点.

谢谢!

插口

Answer 1

那这个呢:

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

这假设父div相对定位.我认为如果你想要.img相对定位而不是绝对定位,这是有效的.只需删除position: absolute并将顶部/左侧更改为margin-top和margin-left.

你可能会想增加与浏览器的支持transform,-moz-transform等等.

Answer 2

老问题,新答案:

当图像大于包装div时,text-align:center或margin:auto不起作用.但是如果图像较小,那么具有绝对定位或负左边距的解决方案将产生奇怪的效果.

因此,当事先不知道图像大小(如在CSM上)并且它可能比包装div更大或更小时,有一个优雅的CSS3解决方案可用于所有目的:

div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

请注意,根据样式表中的其他规则,您可能需要将宽度:auto和/或max-width:none附加到img.