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

【问题标题】：Absolute positioning causing horizontal scroll bars with image绝对定位导致带有图像的水平滚动条
【发布时间】：2018-06-26 09:31:05
【问题描述】：

我有一种情况，我需要一张图片才能“越界”；在大屏幕上工作正常，但在小屏幕上会导致水平滚动条。

我将图像设置为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%);
            }

        }

    }

}

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

【问题讨论】：

标签： html css overflow css-position absolute

【解决方案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;
}

【讨论】：

嗯，它最初并没有设置为背景，因为它需要使用引导程序.img-responsive 类进行响应；其次，使背景超出其界限更加困难；虽然我认为在使用负边距之前我可能已经做过一次。

【解决方案2】：

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

html{
    overflow-x: hidden;
}

【讨论】：

我不是特别喜欢将它应用到整个页面，因为它可以让您错过页面的其他问题。
您的问题可能出在这部分代码img { transform: translate(15%); } 当您的主要内容的边距和内边距小于您的 15% 时，这部分会强制图像超出 html 边界页面

【解决方案3】：

好的，不知道为什么它在 CodePen 上不起作用，但我在本地尝试过，将 overflow-x: hidden; 应用于 .hero 类似乎可以工作。

我仍然很好奇为什么它不适用于任何更近的祖先，所以如果你可以发布一个更好的答案为什么或一个解决方案让它在更近的祖先上工作，那么更多很高兴选择您的答案。

【讨论】：