Question

我总是想知道如果没有JS，这是否可行。

这是你可以看到devolpers和设计师之间仍然存在差距的情况之一，希望我们可以在这里帮助关闭它：）

以下是对如何操作的一个很好的解释（但对于小于容器的元素） 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注入内联的background-image属性和＆lt; img＆gt; src属性。

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

Answer 2

图像的左上角和左上角总是与容器div齐平，除非您知道图像的大小并且可以给它明确的负边距。

example fiddle http://jsfiddle.net/rHUhQ/

根据情况你可以给图像一个类，根据你的需要调整它的样式，因为显然它的容器不重要（如果它首先可以被图像覆盖）。

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

2 个答案: