html - 我想将流体图像在容器内垂直居中，以便它看起来放大/缩小

Question

我正在尝试将图像在其容器内垂直居中，以便当浏览器宽度发生变化并且图像增长到 1500 像素的最大宽度时，图像在顶部和底部均被裁剪。无论宽度如何，图像的最大高度均为 450 像素。我不确定这个解释是否合理。

这是我的 CSS 代码:

<style>
    .Center-Container {
        position: relative;
        background-color: #ccc;
        height: 450px;
        width: 100%;
        max-width: 1500px;
    }

    .Absolute-Center {
        width: 100%;
        height: 450px;
        overflow: hidden;
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
    }
    img {
        max-width: 100%;
    }
</style>

这是 HTML 代码:

<div class="Center-Container">
<div class="Absolute-Center">
    <img src="images/coverimage.jpg" />
</div>
</div>

您可以在此处查看站点:http://www.concept82.com/center/testcenter.html .请原谅当前的图像；我暂时将其用作占位符。非常感谢您抽出时间...我在这方面还是个初学者!

Answer 1

您无法轻松裁剪内容图像。尝试通过 CSS 并使用 background-size: cover::

将图像设为背景图像

#image {
  background: #D84E51 url(http://placekitten.com/800/800?image=10) no-repeat center center;
  width: 400px;
  background-size: cover;
}

Codepen 上的示例:http://codepen.io/KatieK2/pen/KaigG

同时添加一些媒体查询来处理不同视口(viewport)宽度的不同样式。