html - CSS Position 图片比容器大

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/