我创建了3个内联div,它们占其父级宽度的33.333%,现在我试图将图像放入这些div中。可悲的是,如果我放置的图像超出了divs 33.333%的宽度,则该图像会离开容器。我正在尝试使图像占据父容器的整个宽度,但是我没有运气。



.wrapper {
    width: 70%;
    margin: 0 auto;
    height: 100%;
}
.gallery-container {
    font-size: 0px;
    line-height: 0;
    margin-bottom: 15px;
}
.gallery-element {
    display: inline-block;
    width: 33.33333%;
}
.responsive {
    width: 100%;
    height: auto;
}

<div class="wrapper">
        <section>
            <div class="gallery-container">
                <div class="gallery-element">
                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                </div>
                <div class="gallery-element">
                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                </div>
                <div class="gallery-element">
                    <img class='.responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                </div>
            </div>
        </section>
    </div>

最佳答案

删除响应式类上的点。



.wrapper {
    width: 70%;
    margin: 0 auto;
    height: 100%;
}
.gallery-container {
    font-size: 0px;
    line-height: 0;
    margin-bottom: 15px;
}
.gallery-element {
    display: inline-block;
    width: 33.33333%;
}
.responsive {
    width: 100%;
    height: auto;
}

<div class="wrapper">
        <section>
            <div class="gallery-container">
                <div class="gallery-element">
                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                </div>
                <div class="gallery-element">
                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                </div>
                <div class="gallery-element">
                    <img class='responsive' src="https://i.imgur.com/wMkl3hm.jpg" alt="">
                </div>
            </div>
        </section>
    </div>

关于html - 无法将高分辨率图像放入宽度为33.3333%的嵌入式div中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53972033/

10-12 12:34
查看更多