html - 将大小未知的图像居中，并且可能比仅具有 css 的容器大

Question

我一直想知道如果没有 JS 是否可行。

这是您可以看到开发者和设计者之间仍然存在差距的情况之一，希望我们可以在这里帮助缩小差距:)

这里有一个很好的解释如何做到这一点(但仅适用于小于容器的元素) http://css-tricks.com/centering-in-the-unknown/

//HTML
<div class="something-semantic">
   <img class="something-else-semantic" src="wtvr"></img>
</div>

//CSS
.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Answer 1

我最近使用的最佳解决方案是半破解，半出色。

<div class="something-semantic" style="background-image: url( {{src}} )">
   <img class="something-else-semantic" src="{{src}}" />
</div>

//CSS
.something-semantic {
    position:relative; /* or something other than static */
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
}

.something-semantic img{
    width:100%;
    height:100%;
    opacity:0;
}

因此，对于图片库，我会将图像 src 注入(inject)内联背景图像属性和 src 属性。

使 REAL 图像完全透明(但仍然可见)，允许使用 alt 标签、标题等。使用 background 属性可以将图像尺寸限制为您想要的任何大小的容器。