Question

CSS怎么在页面上直接显示有不同度数的图片

Answer 1

你这个不同度数是宽度还是高度?
显示图片不失真（在最大宽度范围内）：只设置宽度或只设置高度，图片会根据宽度等比例缩放图片高度，得到的图片宽：高=1:1；
图片：宽500px 高500px（调整宽或者高小于500p图片都不会失真）
<img style = 'width: 200px;'/> => 图片显示大小：宽200px，高200px（等比例缩放）
<img style = 'height: 200px;'/> => 图片显示大小：高200px，宽200px（等比例缩放）
显示图片可能会失真：宽度和高度超过最大宽度和高度，图片调整时与原图的比例不等于1:1；即，同时调整宽和高，使得原来高度：原来宽度 != 实际高度：实际宽度
图片：宽500px 高500px
<img style = 'width: 200px;height: 300px;'/> => 高度拉伸
<img style = 'width: 300px;height: 200px;'/> => 宽度拉伸
<img style = 'width: 300px;height: 300px;'/> => 等比缩小（不会失真）
<img style = 'width:700px;height: 700px;'/> => 等比增大（可能会失真）