CSS Position Image 比它的容器大答案

【问题标题】：CSS Position Image bigger than it's containerCSS Position Image 比它的容器大
【发布时间】：2015-09-04 13:28:19
【问题描述】：

所以我看到了这个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>

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

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

【问题讨论】：

可以尝试设置溢出：隐藏在容器上的图像
“使用此代码，它并不总是适用于第一个浏览器请求（显示图像的左上角部分），但它显示刷新时的正确位置” – 尝试明确指定图像的宽度和高度。
我希望它具有移动响应能力，所以我不打算对其进行硬编码。

标签： html css

【解决方案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/

【讨论】：

它做了正确的定位部分，但现在只显示了图像的顶部~10%。
我只是指在 Safari 上查看。在 chrome 上，情况更糟；容器左侧的空块。
需要垂直居中对齐？