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属性和标题以添加相关信息。

如果图像仅用于图形目的（背景，装饰等），则使用背景图像属性。

Answer 2

您是否必须使用<img>？

<div class="img-container"></div>
<style>
.img-container{
    background-image: url('myimg.png');
    background-size: cover;
    background-position: center;

    /* Don't forget to add height and width,
        Without content, the div won't have any height and with */
    height: 10em; width 10em;
}
</style>

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

2 个答案: