Html 无法使用溢出-x:在图像上隐藏

我把这张图片放在我的页面顶部，它会随着窗口的缩小而变小，直到某个点，在这样做的时候它需要保持它的大小并保持在中间。正是在这一点上，图像的右侧开始向右“溢出”。我觉得我什么都试过了，但都没用。以下是我代码的一部分：

html

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

仅适用于元素内部的儿童，不适用于背景图像。 您可以使用

背景位置：中心以使背景图像居中。也许适合您的情况，您可以尝试使用
背景尺寸：cover以获得“完美贴合”


在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平剪切图像，以便不留空白


阅读您的评论，我想这是理想的结果：



这提供了正确的效果，但图像需要是位置：绝对；，因为它需要和其他东西重叠

这个怎么样

仅适用于元素内部的子元素，不适用于背景图像。
您可以使用
背景位置：中心以使背景图像居中。也许适合您的情况，您可以尝试使用
背景尺寸：cover以获得“完美贴合”


在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，则会垂直或水平剪切图像，以便不留空白


阅读您的评论，我想这是理想的结果：



这提供了正确的效果，但图像需要是位置：绝对；，因为它需要和其他东西重叠

这个怎么样

背景大小：contain
也可能有效，具体取决于想要的效果。嗯。。。我现在试图改变背景位置的中心和包含，和背景大小覆盖，但似乎没有任何工作。。。你还有其他想法吗？@Chris我加了一个，我猜你想要这样的东西吗？@sn3p是的，效果不错，但图像必须是位置：绝对；，因为它需要与其他东西重叠。当我把它放进去的时候，效果又恢复到以前的样子了…添加了另一个例子，和以前一样，但是做了一些调整：）
背景大小：contain
也可以工作，这取决于想要的效果。嗯。。。我现在试图改变背景位置的中心和包含，和背景大小覆盖，但似乎没有任何工作。。。你还有其他想法吗？@Chris我加了一个，我猜你想要这样的东西吗？@sn3p是的，效果不错，但图像必须是位置：绝对；，因为它需要与其他东西重叠。当我把它放进去的时候，效果又回到了以前的样子……添加了另一个例子，和以前一样，但做了一些调整：）
<div class="imageThing"></div>

.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;
  }
}