如何调整img标签的大小？

Question

我想在小窗口中显示图像,但我需要节省图像的比例(我仍然希望人们可以知道它是什么).例如,假设图像是1000X200像素,并且有一个div定义为:height:100px; 宽度:100px; 所以我希望图像会像这样写:

<img src="asd.jpg" height=20 width=100 />

并不是

<img src="asd.jpg" height=100 width=100 />

或不

<img src="asd.jpg"/>

然后是卷轴..

我可以使用百分比,但我该怎么做..(它甚至可以单独使用百分比吗？)

Answer 1

如果设置max-height和max-widthCSS中,现代的浏览器将其限制在该尺寸,但保持宽高比是否正确:

<img src="asd.jpg" style="max-height: 100px; max-width: 100px;" />

Answer 2

如果你的父母div有一组width和height,你可以设置最大宽度和最大高度img来100%:

div {
  width: 100px;
  height: 100px;
}
div > img {
  max-width: 100%;
  max-height: 100%;
}

(对于移动浏览器等,最大宽度为100%的图像始终是一个好习惯)