CSS3 object-fit: cover属性用法演示 - 图像自动裁剪

object-fit: cover; CSS Example 在chrome等现代浏览器中，建议使用新的object-fit: cover方法来替代原来的background-size: cover来实现图片的自动适应。object-fit: cover不会引起图片拉伸变形（通过裁剪）。

css3, 图片，自适应，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 5870
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<header>
    <h1>Utilizing <code>object-fit: cover</code></h1>
    <p>If you're inclined to use <code>background-size: cover;</code> as a default way of controling image sizes, consider starting with <code>object-fit: cover;</code> as a first measure. It has <a href="https://caniuse.com/#search=object-fit" target="_blank">decent support in modern browsers</a>,
        but IE and Edge are still lagging behind. Read more on <a href="https://css-tricks.com/almanac/properties/o/object-fit/" target="_blank">CSS Tricks</a>.</p>
</header>

<h2>1. Thumbnails of Original Image Proportions</h2>
<section class="c-thumbs">
    <img class="c-thumbs__img" src="https://images.unsplash.com/photo-1460804198264-011ca89eaa43?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=88faad36f16933bb58c9e5f8ec52de14&w=500" alt="" />
    <img class="c-thumbs__img" src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c2447a69043e39f174216c5440f0fb2d&w=500" alt="" />
</section>

<h2>2. Images Controlled by <code>object-fit: cover;</code></h2>
<section class="c-listing">
    <article class="c-post">
        <img class="c-post__img" src="https://images.unsplash.com/photo-1460804198264-011ca89eaa43?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=88faad36f16933bb58c9e5f8ec52de14&w=500" alt="" />
    </article>

object-fit: cover; CSS Example 在chrome等现代浏览器中，建议使用新的object-fit: cover方法来替代原来的background-size: cover来实现图片的自动适应。object-fit: cover不会引起图片拉伸变形（通过裁剪）。

css3, 图片，自适应，教程

编辑器支持Emmet

快捷键

object-fit: cover; CSS Example 在chrome等现代浏览器中，建议使用新的object-fit: cover方法来替代原来的background-size: cover来实现图片的自动适应。object-fit: cover不会引起图片拉伸变形（通过裁剪）。

css3, 图片，自适应，教程

CSS3 Flat和preserve-3d两种transform-style属性效果的演示

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：