CSS3 background-size: contain

contain

按照图片的某一边的大小等比例拉伸图片,填充到容器。

<!-- 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>

显示效果

更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程