首页 文章

CSS Position Image比它的容器大

提问于
浏览 次
0

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

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

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

html css

1 回答

  • 0

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

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

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

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

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

    回复于

相关问题