CSS图像调整大小问题

如果您不希望图像拉伸，则应固定一个尺寸，而将另一个尺寸设为auto。（这将保留图像的长宽比）

请参阅下面的示例，其中width在height自动调整时保持不变：

img {  display: block;}.correct,.incorrect {  border: 1px solid red;  display: inline-block;}.incorrect img {  max-width: 100%;  width: 100px;  height: 100px;}.correct img {  max-width: 100%;  width: 200px;  height: auto;}<div>This one stretches out:</div><div >  <img src="http://placehold.it/150x50" /></div><div>This will preserve aspect ratio and look right:</div><div >  <img src="http://placehold.it/150x50" /></div>

请参阅下面的示例，其中height在width自动调整时保持不变：

img {  display: block;}.correct,.incorrect {  border: 1px solid red;  display: inline-block;}.incorrect img {  max-height: 100%;  height: 100px;  width: 100px;}.correct img {  max-height: 100%;  height: 200px;  width: auto;}<div>This one stretches out:</div><div >  <img src="http://placehold.it/150x50" /></div><div>This will preserve aspect ratio and look right:</div><div >  <img src="http://placehold.it/150x50" /></div>