Html 当我们使用宽度为100%的图像时，如何从盒子底部移除空间

当我们使用宽度为100%的图像时，如何从盒子底部移除空间

<div class="midVideo"><img src="images/videoImg.png" alt="" /></div>

.midVideo{
    width:487px;
    display:inline-block;
    border-radius:10px;
    overflow:hidden;
    border:solid 12px #630400;
    background:#003;
}

.midVideo img, .midVideo iframe{
    width:100%;
}

.midVideo{
宽度：487px；
显示：内联块；
边界半径：10px；
溢出：隐藏；
边框：实心12px#630400；
背景：#003；
}
.midVideo img、.midVideo iframe{
宽度：100%；
}

图像被替换为元素。这些元素与内联元素非常相似，因此它们被放置在父元素的顶部。下面的空间是为超过高度的字母保留的，如

pqg

等。由于图像不需要此空间，您只需在图像上定义

display:block

，即可将其删除。

图像是替换的元素。这些元素与内联元素非常相似，因此它们被放置在父元素的顶部。下面的空间是为超过高度的字母保留的，如

pqg

等。由于图像不需要此空间，您只需在图像上定义

显示：块

，即可将其删除。

将显示块属性添加到图像

将显示块属性添加到图像

简单的方法是

<img style="height: 100%;" src="images/videoImg.png" alt="" />

困难的是

<div class="midVideo">
<img style="[b]<? $img_size = getimagesize('images/videoImg.png'); if ($img_size[0]>$img_size[1]) echo 'width'; else echo 'height'; ?>[/b]: 100%;" src="images/videoImg.png" />
</div>

简单的方法是

<img style="height: 100%;" src="images/videoImg.png" alt="" />

困难的是

<div class="midVideo">
<img style="[b]<? $img_size = getimagesize('images/videoImg.png'); if ($img_size[0]>$img_size[1]) echo 'width'; else echo 'height'; ?>[/b]: 100%;" src="images/videoImg.png" />
</div>