我创建了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/