我不知道为什么,我的 div 中的图像下方有一个白色边框或空格。我正在尝试制作一个可以完美贴合图像的盒子,但它下面的空白区域让它看起来非常糟糕。如何禁用它?
HTML
<div class="content-img">
<img src="">
</div>
<div class="content-box">
<p>HELLO WORLD</p>
</div>
CSS
.content-box {
background: white;
border-radius: 3px;
max-width: 70%;
height: 300px;
margin: 1em 0;
padding: 1em;
overflow: hidden;
-webkit-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
-moz-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
}
.content-img {
background: white;
border-radius: 3px;
width: 70%;
margin: 1em 0;
overflow: hidden;
-webkit-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
-moz-box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
box-shadow: 8px 8px 10px -5px rgba(0,0,0,0.3);
}
.content-img img {
zoom: 2; //increase if very small images
display: block;
margin: auto;
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}
fiddle 链接: https://jsfiddle.net/elliotsoomro/o68rhr1L/
最佳答案
这是为下行文本元素(例如 j、y、p、q、g)保留的间隙。您可以通过将 vertical-align:top;
添加到图像元素来摆脱它。
关于html - 为什么div中这张图片下面有白边?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35467308/