如何保持原始图像比例？

Question

如何保持原始图像比例？

如果我有一个“ img”元素，并且执行“ style =” width：25px; height：自动；“”图片没有自动高度，已修改。如何获得自动高度？

Answer 1

默认情况下，width标签的height和img属性会执行此操作。

<img width="100" src="https://images.unsplash.com/photo-1562939230-e05e7c80c1d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=652&q=80" />
<hr />
<img width="25" src="https://images.unsplash.com/photo-1562939230-e05e7c80c1d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=652&q=80" />

Answer 2

您可以使用下面给出的代码。

#one {
  width: 25%;
  height: auto:
}

#two {
  width: 20%;
  height: auto:
}

<img id="one" src="https://picsum.photos/id/237/120/180" />

<img id="two" src="https://picsum.photos/id/237/120/180" />