Question

我正在尝试创建一个div，当你缩放窗口时，修剪图片。这是有效的，但图像只是在右边而不是在左边。

如何在左侧修剪它，使图片保持在中间？

我的HTML：

<div class="top-foto">
    <img src="http://whatatimeline.com/covers/1330597507de0/balloons-sunset-view-facebook-cover.jpg" alt="Coverphoto">
</div>

我的css：

.top-foto {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 315px;
    overflow: hidden;
}
.top-foto > img {
    margin: 0 auto;
    display: block;
    max-width: inherit;
}

http://jsfiddle.net/Rings/quz6a3qq/1/

Answer 1

绝对定位图像并使用translate

将其居中

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.top-foto {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 315px;
  overflow: hidden;
}
.top-foto > img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
}

＆＃13;

<div class="top-foto">
  <img src="http://whatatimeline.com/covers/1330597507de0/balloons-sunset-view-facebook-cover.jpg" alt="Cover photo" />
</div>

＆＃13;

在调整大小窗口上裁剪图片

1 个答案: