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

Question

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

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

Screenshot of the stretching and my view from Chrome Inspector

Answer 1

为确保保留图片的纵横比且图片不会被拉伸，请应用以下 CSS，针对 div 内的 img：

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

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

How do I correct images that are stretching disproportionately when the DIV class containing it is sized correctly?

html

css

wordpress

image

elementor