时间戳

首页 > 解决方案 > 无法将高分辨率图像放在宽度为 33.3333% 的内联 div 中

html - 无法将高分辨率图像放在宽度为 33.3333% 的内联 div 中

问题描述

我创建了 3 个内联 div，占其父宽度的 33.333%，现在我正试图在这些 div 中放置一个图像。可悲的是，如果我放置的图像超过了 div 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>

标签： htmlcss

解决方案

删除响应类上的点。

.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>

推荐阅读