图片如何等比例缩小

现在有图片 123.png,大小为 2000 * 1500,宽高比例为 2000:1500,即 4:3,因此想要等比例缩小,包裹图片的div元素的宽高比也要为 4:3才能等比例缩小。
缩小时,需设置图片的最大宽高为 100%,保证图片不会超出包裹的 div。
放大会导致失真,所以一般图片都只会偏大。

第一种:使用div包裹img

<div class="img-container">
	<img src="../123.png">
</div>

css 中:

.img-container {
	height: 600px;
	width: 800px;
}
img {
	max-width: 100%;
	max-height: 100%
}

第二种:直接img元素的宽高

img{
  width: 675px;
  height: 480px;
}

猜你喜欢

转载自blog.csdn.net/romeo12334/article/details/85243038