按照图片的某一边的大小等比例拉伸图片,填充到容器。
<!-- flower.png 真实的图片大小是 132 * 100 -->
<!-- div 容器的大小是 200 * 200 -->
<!-- 由于 flower.png 的宽更接近容器的大小,所以 contain 属性 会把 flower.png 按照容器的宽等比例的拉伸图片 -->
<div style="width:200px; height:200px; background-image:url('https://www.jmjc.tech/public/home/img/flower.png'); background-size: contain;"></div>
显示效果