Question

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

这是我的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

还添加一些媒体查询以处理不同视口宽度的不同样式。

Answer 2

可以垂直居中img元素。这是一个很好的资源：How to crop an image with a CSS class

使用百分比垂直居中：

<强> CSS

.image-cropper {
  position: relative;
  width: 360px;
  height: 240px;
  overflow: hidden;
  border: 1px red solid;
}

.centered {
  position: absolute;
  left: -50%;
  top: -50%;
}

<强> HTML

<div class="example">
  <p>Center cropped image</p>
  <div class="image-cropper">
    <img class="centered" alt="myimage" src="images/myimage.jpg" />
  </div>
</div>

我想在容器内垂直居中一个流体图像，使其看起来可以放大/缩小

2 个答案: