我一直想知道如果没有 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;
}
最佳答案
我最近使用的最佳解决方案是半破解,半出色。
<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 属性可以将图像尺寸限制为您想要的任何大小的容器。
关于html - 将大小未知的图像居中,并且可能比仅具有 css 的容器大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20502802/