Question

我正在尝试创建带有一些图像的HTML页面。一些图像将是宽度：100％。我遇到的问题是，由于某种原因，一些图像在水平方向上有点溢出了窗口。

我尝试将所有图像设置为宽度：100％；高度：自动；但仍然有点溢出。

我确信有一种方法可以使窗口中的所有内容完全没有水平滚动，但是我无法弄清楚。谢谢您的帮助。

.banner img{
    width: 100%;
    height: auto;
}

.banner2 img    {
    width: 100%;
    height: auto;
}

.product-grid   {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
}

.item1   {
    grid-column: 2/3;
    grid-row: 2/3;
    width: auto;
}

.item2  {
    grid-column: 3/4;
    grid-row: 2/3;
    width: auto;
}

.item3    {
    grid-column: 2/3;
    grid-row: 3/4;
    width: auto;
}

.item4   {
    grid-column: 3/4;
    grid-row: 3/4;
    width: auto;
}

.item1 .item2 .item3 .item4 img {
    width: 50%;
    height: auto;
}

.footer img {
    width: 100%;
    height: auto;
}

<body>


    <div class="banner">
        <img src="images/banner.jpg" alt="">
    </div>

    <div class="banner2">
        <img src="images/banner2.jpg" alt="">
    </div>


    <div class="product-grid">
        <div class="item1">
                <img src="images/item1.jpg" alt="">
        </div>

        <div class="item2">
                <img src="images/item2.jpg" alt="">
        </div>

        <div class="item3">
                <img src="images/item3.jpg" alt="">
        </div>

        <div class="item4">
                <img src="images/item4.jpg" alt="">
        </div>
    </div>

    <div class="footer">
        <img src="images/footer.jpg" alt="">
    </div>
</body>

使内容适合窗口大小CSS

0 个答案: