避免图像超出 div？答案

【问题标题】：Avoid an image to go outside a div?避免图像超出 div？
【发布时间】：2011-05-18 17:39:55
【问题描述】：

我有：

<div style="height:15px">
    <img src="image" />
</div>

图片大于 15px，所以当你看到它时它在 div 之外。我如何“裁剪”图像（仅显示它的 15px 端口），仅使用 css？

【问题讨论】：

标签： css html crop

【解决方案1】：

您需要overflow:hidden，请在此处查看示例：

了解overflow：here W3Schools

祝你好运！

【讨论】：

【解决方案2】：

尝试给 div 一个 overflow:hidden。

【讨论】：

【解决方案3】：

将overflow:hidden; 添加到您的 div 样式中。

【讨论】：

【解决方案4】：

使用溢出的css属性：

overflow: hidden;

【讨论】：

【解决方案5】：

使用

overflow:hidden;

【讨论】：

【解决方案6】：

我很惊讶没有人建议object-fit: cover;

【讨论】：

【解决方案7】：

overlow: hidden、object-fit: cover; 和 width: fit-content 他们都有自己的障碍。如果您有多个图像，那么这些方法可能无法为您提供最佳解决方案。
相反，您可以使用max-height 和max-width 来定义父元素大小并强制子元素相应地放入其中

<div style="height:15px; width: 15px;">
    <img src="image" style="max-height:100%; max-width: 100%;">
</div>

【讨论】：