html - 绝对定位导致带有图像的水平滚动条

Question

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

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

我已经尝试在它的父级和其他祖先上使用 overflow: hidden; ，但这所做的只是完全 overflow hidden ；我不想在视觉上 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;
}