Question

我有一种情况，我有一个图像，我需要它能够“超出它的范围”;在较大的屏幕上工作正常，但在较小的屏幕上导致水平滚动条。

我将图片设置为position: absolute，所以认为这不会导致此问题？

我尝试在它的父级以及其他祖先上使用overflow: hidden;，但所有这一切都完全隐藏了溢出;我不想隐藏溢出视觉，我只是想摆脱滚动条。

CodePen示例： https://codepen.io/gutterboy/pen/RxeMGx

HTML：

<div id="home" class="site-container">
    <div class="hero">
        <div class="container">
            <div class="row">
                <div class="details col-xs-12 col-md-5 col-lg-5">
                    <section id="about" class="intro">
                        <p>s esse dicamus. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Quid ergo hoc loco intellegit honestum?</p>
                        <p>Vide, quantum, inquam, fallare, Torquate. Sed fortuna fortis; Prodest, inquit, mihi eo esse animo. Ut id aliis narrare gestiant? Quare conare, quaeso. Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex.</p>
                    </section>
                </div>
                <div class="photo col-md-7 col-lg-7">
                    <img src="https://i.pinimg.com/originals/9b/eb/39/9beb39ffdbc43f20bd886b88b45edd59.jpg" class="img-responsive" alt="Paint" />
                </div>
            </div>
        </div>
    </div>
</div>

CSS： （注意，也使用Bootstrap 3.6）

#home {

  &.site-container {
    margin: 20px;
    border: 2px solid #000;
  }

    .hero {

      .details {
        padding: 15px;
      }

        .photo {
          position: relative;

            @media (min-width: 992px) {
                min-height: 458px;
            }

            @media (min-width: 1199px) {
                min-height: 553px;
            }          

            img {
                display: block;
                position: absolute;
                top: 0;
                left: 0;              
                transform: translate(15%);
            }

        }

    }

}

我能做些什么来实现这个目标？

Answer 1

您是否有任何理由不将其设置为背景？

像这样？ https://codepen.io/anon/pen/zpmJxz

&.site-container {
 margin: 20px;
 border: 2px solid #000;
 background-image: url('https://i.pinimg.com/originals/9b/eb/39/9beb39ffdbc43f20bd886b88b45edd59.jpg');
 background-repeat: no-repeat;
 background-position: right 10% bottom;
 background-size: 30%;
 padding: 10% 0;
}

Answer 2

如果您希望页面没有水平滚动，请使用此

html{
    overflow-x: hidden;
}

Answer 3

好的，不确定为什么它不能在CodePen上运行，但我在本地尝试过，将overflow-x: hidden;应用到.hero类似乎有效。

我仍然很好奇为什么它不能在任何更近的祖先上工作，所以如果你可以在为什么上发布一个更好的答案或者它可以解决更紧密的问题祖先然后非常乐意选择你的答案。

绝对定位导致水平滚动条与图像

3 个答案: