Html 中 div 内部的 img 标签显示超过 div 设定宽高

原因:

在对 img 的描述中包含:

The white space displayed below image elements in HTML is often cause for confusion, but there is a logical explanation: **Images are inline elements, and inline elements have descenders.**

翻译为:

图像是: 在 div 中的图像是内联元素,内联元素有派生元素。

实际上类似于 div 中的文字,需要按照设置内联元素的模式设置其高度,使其不超过 div 的设定值。

示例如下:

img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;  

}

<div style="display:flex;text-align: right;width: 35%;;height: 150px;">
    <img src="${file.picture}">
</div>

如上所示,通过设置 div 的显示模式为 display:flex; 然后 img 的高宽设置为 auto; 这样即可通过调整 div 的宽高,调整
img 的宽高,达到自适应的效果。

  
    展开阅读全文