html - 无法使用 overflow-x : hidden on image

Question

我的页面顶部有这张图片，它随着窗口变小，直到某个点需要保持其大小并在这样做时保持在中间。正是在这一点上，图像的右侧开始向右“溢出”。我觉得我已经尝试了一切，但没有任何效果。这是我的代码的一部分:

html

<div class="imageThing"></div>

CSS

.imageThing {
  position: absolute;
  overflow-x: hidden;
}

@media (min-width: 1071px) {
  .imageThing {
    opacity: 0;
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -moz-animation: fadein 1s; /* Firefox */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera */
    animation: fadein 1s;
    animation-delay: .25s;
    animation-fill-mode: both;
    background: #fff url('https://cdn.glitch.com/57cbb378-055c-4d36-a029-5a44e3138ccd%2Fhuekast.jpg?1549906076009') 0px 0px no-repeat ;
    background-size: 100vw 30.15vw;
    height: 30.15vw;
    width: 100vw;
    top: 0px;
    left: 0px;

  }
}

@media (max-width: 1070px) {
 .imageThing {
    background: #fff url('https://cdn.glitch.com/57cbb378-055c-4d36-a029-5a44e3138ccd%2Fhuekast.jpg?1549906076009') 0px 0px no-repeat ;
    background-size: 1070px 322px;
    height: 322px;
    width: 1070px;
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -moz-animation: fadein 1s; /* Firefox */
    -ms-animation: fadein 1s; /* Internet Explorer */
    -o-animation: fadein 1s; /* Opera */
    animation: fadein 1s;
    animation-delay: .25s;
    animation-fill-mode: both;
    left: 50%;
    margin-left: -535px;
    overflow-x: hidden;
  }
}

我真的希望你能帮助我。提前谢谢你

Answer 1

overflow仅适用于元素内的子元素，不适用于背景图像。 您可以使用 background-position: center; 使背景图像居中。也许适合您的情况，您可以尝试使用 background-size: cover; 以获得“完美契合”。

cover

Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

---

阅读您的评论我想这是期望的结果:

CodePen

---

that gives the right effect, but the image needs to be position: absolute;, because it needs to overlap with something else

这个怎么样？

CodePen