最后一张图片在缩小时永远延伸

问题描述 投票:0回答:0

如果我尝试缩小到最大,无论我放入什么图像,如果它是最后一张,那么它将永远拉长,而其他图像则保持应有的状态。 [1(https://i.stack.imgur.com/wywqs.jpg)

这是 25% 缩放。

<div class="sh3-background" id="scroll3">
                <img src="sh3-background.jpg" alt="" class="shbg">
                <img src="sh3-logo.png" alt="" class="sh2logobg">
                <div class="shcontent">
                    <h3>Silent Hill 3 is a survival horror game developed by Team Silent and published by Konami in 2003. It is the third installment in the Silent Hill series and a direct sequel to the first Silent Hill game. The game follows Heather, a teenager who becomes entangled in the machinations of the town’s cult, which seeks to revive a malevolent deity. The game was critically successful and praised for its presentation, including the environments, graphics and audio, as well as the overall horror elements and themes that are continued from past installments.</h3>
                    <h1>PLATFORMS:</h1>
                    <ul>
                        <li>PLAYSTATION 2</li>
                    </ul>
                    <iframe width="220" height="115"
                    src="https://www.youtube.com/embed/9s5t6R3aWwY">
                    </iframe>
                </div>

            </div>
            <div class="shf-background" id="scroll4">
                <img src="shf-background.png" alt="" class="shbg">
                <img src="shf-logo.png" alt="" class="sh2logobg">
                <div class="shcontent">
                    <h3>Silent Hill f is an upcoming survival horror game developed by NeoBards Entertainment and published by Konami. It is the ninth mainline game in the Silent Hill franchise and the first mainline title in the franchise in over a decade. Unlike previous games in the series, it is not being set in the titular town, but in 1960s rural Japan.</h3>
                    <h1>PLATFORMS:</h1>
                    <ul>
                        <li>PLAYSTATION 5</li>
                        <li>STEAM</li>
                    </ul>
                    <iframe width="220" height="115"
                    src="https://www.youtube.com/embed/ZqzK_nqDU9M">
                    </iframe>
                </div>
            </div>

这是用过的CSS

  .shbg {
    position: absolute;
    width:99%;
  }

    .shcontent{
    position:relative;
    margin-left:1.2em;
    margin-top:0.5em;
    color:white;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-style:normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 37px;
    text-shadow: 2px 2px 5px black;
}


我试过搞乱高度,但没关系,它总是被放入的最后一张图像被搞砸了,我不知道如何阻止它。

html css image display
© www.soinside.com 2019 - 2024. All rights reserved.