Question

所以我看到了How do I center an image if it's wider than its container? 我有类似的东西

.section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}
.section-background-image {
    position: relative;
    right:-30%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.section-background-image img {

    position: relative;
    right:-30%;
    min-width: 100%;
    max-width: none;
    min-height: 100%;
    top: 0;
    left: 0;
}
    <div class="section-background">

      <div class="section-background-image " data-stellar-ratio="0.4">
        <img src="my_huge_image.png" alt="" style="opacity: 0.3;">
      </div>

    </div>

如果图像不适合容器，我希望图像的正确部分出现（默认情况下是左上角部分）。

使用此代码，它不会始终处理第一个浏览器请求（显示图像的左上角部分），但它会在刷新时显示正确的位置。

Answer 1

如果div中没有文字，您可以使用direction: rtl;

.section-background-image {
  ....
  direction: rtl;
}

对于垂直对齐，请使用以下css

.section-background-image img {
 ...
  top:50%;
  transform: translateY(-50%);
}

http://jsfiddle.net/afelixj/q4o08e8u/1/

CSS Position Image比它的容器大

1 个答案: