当包含它的 DIV 类的大小正确时，如何纠正不成比例地拉伸的图像？

Posted 2023-03-05

【中文标题】当包含它的 DIV 类的大小正确时，如何纠正不成比例地拉伸的图像？

【英文标题】：How do I correct images that are stretching disproportionately when the DIV class containing it is sized correctly?

【发布时间】：2020-03-08 11:36:29

【问题描述】：

我目前正在开发一个时间线模块（Elementor/Wordpress），虽然图像上传正确，在 Wordpress 库中正确显示，并且在那里显示正确的比例，但最终显示错误。

div 类是<div class="eael-content-timeline-img eael-picture">，在 Inspector 中，我可以将鼠标悬停在它上面并查看尺寸是否正确（在本例中为 60x60）。但是，当我将鼠标悬停在 img src 上时，我可以看到尺寸是倾斜的 (60x24)，我不确定这些数字来自哪里，因为这不是我通过构建器设置的。

Screenshot of the stretching and my view from Chrome Inspector

【参考方案1】：

为确保图像的纵横比得到保留并且图像不会被拉伸，请应用以下CSS，以img 为目标div：

.eael-content-timeline-img img 
  width: 100%;
  height: auto;

【讨论】：

谢谢！这最终解决了问题，我只需要调整我的目标类并使用 'eael-content-timeline-img img width: 100%;高度：自动； '