将未知大小的大图像居中在一个较小的 div 中，并隐藏溢出

Question

我想在 不带 javascript 和 不带背景图像的 div 中居中显示 img。

这是一些示例代码

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

• 不知道img的大小，应该可以超过parent的宽度
• 我不知道父 div 的宽度（它是 100%）
• 父 div 具有固定高度
• 图片大于父级且父级有overflow:hidden
• 只需要支持现代浏览器

想要的结果。 （忽略不透明度等，只注意定位）。

我知道这可以通过背景图片轻松完成，但这不是我的选择。我也可以使用 javascript，但这似乎是一种非常笨拙的方式来实现这一点。

谢谢！

杰克

Answer 1

老问题，新答案：

当图像大于包装 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 */
}

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

Answer 2

这个呢：

.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 3

我知道这是旧的，但我也想出了一个与上述非常相似的纯 css 解决方案。

.parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}

Answer 4

感谢大家的帮助。 我认为这仅在 CSS 中是无法实现的。

我将转向 jQuery 解决方案。这里有一些[伪]代码供感兴趣的人使用。

我打算放弃 CSS 解决方案，但看起来可以做到（请参阅接受的答案）。这是我要使用的 JS 解决方案。

var $img = $('img'),
    w = $img.width();

$img.css({marginLeft: -w});

以及随附的 css

img{
  position:absolute;
  left:50%;
}

Answer 5

这总是有点棘手，并且有很多解决方案。我发现最好的解决方案如下。这会将其垂直和水平居中。

CSS

#container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

HTML

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>
    <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>

See fiddle

略有不同的技术：Fiddle

Answer 6

只需初始化图像的位置如下。

HTML：

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

CSS：

#img {
    left: 0;
    right: 0;
}

或查看margin: auto;

这是用于水平对齐。要将其垂直对齐，您可以对您的 <div> 执行 display: table-cell; 然后 vertical-align: middle; 但这不是一个好习惯，因为您的 <div> 不是表格。