如何在不创建空白区域的情况下使图像被窗口大小吞噬答案

【问题标题】：How to make image swallowed out of window size without create blank space如何在不创建空白区域的情况下使图像被窗口大小吞噬
【发布时间】：2019-11-06 16:46:54
【问题描述】：

这是我构建的： https://i.imagesup.co/images2/e51854cad0f72ef2900debd5518472d71713cc71.png 没有溢出，因为我放入了body标签溢出-x：隐藏，这是一种“讨厌”的方式。

我尝试将 div 容器设置为 width:100vw,max-width:100vw;但它仍然没有帮助。试图以负边距和我知道的所有可能方式来做到这一点，但它仍然会像这样创建溢出： https://i.imagesup.co/images2/794cf0f60d80b8a2de4f5ac44d93579bd50ace2d.png

这是浅蓝色部分的相关代码，先谢谢了：

<body>
    <div id="divStyle1">
        <header>
            <h1>
                <span>How to <span class="importantH1">ripen Avocado</span> quickly ?</span>
                <span><span class="importantH1">RFP bags</span> ripen Avocado within <span class="importantH1">12-24 hours !</span></span>
            </h1>
        </header>

        <main>            
            <div id="purpuleLineBox">
                <div id="purpuleLine1"> <p>100% recyclable and bio-degradable</p> </div>
                <div id="purpuleLine2"> <p>Simulates the natural ripening process, organic</p> </div>
                <div id="purpuleLine3"> <p>The quickest way to achieve the  perfect avocado taste</p> </div>
                <div id="purpuleLine4"> <p>Work with Mango, Banana, Peach, and another climacteric fruits</p> </div>
                <div id="purpuleLine5"> <p>The user interface on the bag shows when an avocado is fully ripen</p> </div>
            </div>

            <img id="logoImg" src="Logo.png" alt="">
        </main>
    </div>
</body>

body {
    margin: 0 auto;
}

html {
    scroll-behavior: smooth;
}

#divStyle1 {
    height: 90vh;
    background-color: #016087;
}

h1>span {
    display: block;
}

h1 {
    color: white;
    text-shadow: 2px 2px black;
    font-size: 45px;
    margin: 0 auto;
}

.importantH1 {
    border-bottom: 10px solid #D52C82;
    font-size: 53px;
}

.importantH1:hover {
    border-bottom: 15px solid #D52C82;
    font-size: 55px;
    transition-duration: 0.5s;
}

#logoImg {
    position: absolute;
    right: -20px;
    top: 10vh;
    transform: rotate(8deg);
    border: 20px dashed white;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-bottom: 20px;
}

#purpuleLineBox {
    margin-top: 100px;
}

#purpuleLine1 {
    background-color: #D52C82;
    height: 50px;
    width: 34%;
    margin-bottom: 30px;
}

#purpuleLine2 {
    background-color: #D52C82;
    height: 50px;
    width: 44%;
    margin-bottom: 30px;
}

#purpuleLine3 {
    background-color: #D52C82;
    height: 50px;
    width: 52%;
    margin-bottom: 30px;
}

#purpuleLine4 {
    background-color: #D52C82;
    height: 50px;
    width: 58%;
    margin-bottom: 30px;
}

#purpuleLine5 {
    background-color: #D52C82;
    height: 50px;
    width: 60%;
    margin-bottom: 30px;
}

div>p {
    font-size: 30px;
    color: white;
    text-shadow: 2px 2px black;
    font-weight: bold;
    margin-top: 0px;
}

【问题讨论】：

关于溢出-x：隐藏；你说的“这是一种“讨厌”的方式是什么意思。这会破坏布局吗？
它不会破坏布局并且效果很好，但问题是我不明白是什么导致了这种情况发生。 @CesarCorrechel

标签： html css

【解决方案1】：

这是由于使用绝对定位的right: -20px; 和transform: rotate(8deg); 的组合而发生的，如果您删除转换并将右边设置为 0，则它不应该有空格。

如果您想保留这些样式，只需使用overflow-x: hidden;

【讨论】：

是的，我知道这一点。但这是解决它的唯一方法吗？