html - CSS图像全宽和垂直居中？

Question

我很难找到这个问题的可靠答案。之前可能有人问过，但我无法在任何地方找到有效的解决方案。

我想要的是使我的图像全宽 100%，保持纵横比并使图像垂直居中并 overflow hidden 。

这是我的:

HTML:

<div class="img-container">
    <img src="myimgurl.jpg">
</div>

CSS:

.img-container {
    width: 100%;
    height: 200px;
    max-height: 240px;
    overflow: hidden;
    margin: 0;
    position: relative;
}

.img-container img {
    position:absolute;
    vertical-align: middle;
    max-width: 100%;
}

Answer 1

如果你真的必须使用 <img> :

HTML:

<div class="img-container">
    <img src="myimgurl.jpg">
</div>

CSS:

.img-container {
    width: 100%;
    height: 200px;
    max-height: 240px;
    overflow: hidden;
    margin: 0;
    position: relative;
}

.img-container img {
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    max-width: 100%;
}

转换的使用； translateY() 是一种将元素垂直居中的便捷方法。

现场演示(感谢@dsfq): http://jsfiddle.net/rrLyopxe/

好处:什么时候应该使用 img 元素？什么时候可以简单放个背景？

如果您将图像用作社论/信息内容，这应该是 <img>元素，因此您可以提供 alt 属性和标题来添加有关它的信息。

如果图像仅用于图形目的(背景、装饰等)，则需要使用背景图像属性。