我不知道为什么,但是我的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%;
}


链接到小提琴:https://jsfiddle.net/elliotsoomro/o68rhr1L/

最佳答案

这是为后继文本元素(例如j,y,p,q,g)保留的间隙。您可以通过在图像元素中添加vertical-align:top;来摆脱它。

jsFiddle example

10-06 03:57