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仅适用于元素内部的子级，不适用于背景图片。您可以使用class User < ActiveRecord::Base has_many :sessions, :class_name => 'Authie::Session', :as => :user, :dependent => :destroy end来使背景图像居中。也许适合您的情况，您可以尝试使用background-position: center;来获得“完美契合”。

cover

在不拉伸图像的情况下尽可能放大图像。如果图像的比例与元素不同，则可以垂直或水平裁剪图像，以确保没有空白空间。

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

CodePen

具有正确的效果，但图像必须处于位置：绝对；因为它需要与其他物体重叠

怎么样？

CodePen

无法使用overflow-x：隐藏在图像上

1 个答案: