CSS图像到全宽和垂直居中？

Question

我无法为这个问题找到一个可靠的答案.可能之前有人问过,但我无法在任何地方找到合适的解决方案.

我想要的是使我的图像全宽100%,保持纵横比并垂直居中,溢出隐藏.

这就是我所拥有的:

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属性和标题来添加有关它的信息.

如果图像仅用于图形目的(背景,装饰等),则使用背景图像属性.