README

一个轻量级的无依赖的object-fit补充。

特性

blobject-fit通过background-size: cover和background-size: contain分别提供对object-fit: cover和object-fit: contain样式的回退支持。

如果object-position的值是像"top"或"center"这样的关键字，则支持object-position，例如object-position: top right，通过background-position: Y X。默认是center center。

只要访问者的浏览器支持您选择的特定标记，blobject-fit就具有响应能力。例如

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="Image" />
<!--
IE 11 will always use small.jpg, while Edge 14 will choose between small.jpg,
medium.jpg, and large.jpg depending on the screen size.
-->

它还提供了对object-fit: cover和object-fit: contain视频的回退支持，尽管对于cover，JavaScript必须显式设置宽度和高度。

对于视频元素，还不支持object-position。它们将从center center绘制。

要求

blobject-fit不需要任何JavaScript框架，但是浏览器必须支持以下内容

classList (IE10+)
querySelector + querySelectorAll (IE8+)

图像需要

background-size (IE9+)

视频需要它们本身所做的工作

video (IE9+)

响应式图像源（例如srcset，<picture>）需要浏览器原生支持您选择的标记。否则，它将仅使用古老的src源。

非视频<video>源可能无法正确设置大小。如果您正在处理预IE9的用户群或具有其他兼容性关注点，您应在构建DOM时实施额外的测试。

安装

HTML

下载blobject-fit.min.js，将其添加到您的项目文件夹中，并在页面上某个位置包含它。

<script src="/path/to/blobject-fit.min.js"></script>

或通过Composer

composer require "blobfolio/blobject-fit:dev-master"

或通过Bower

bower install blobject-fit

CSS

您的现有object-fitCSS定义可能在运行时不可读。遵循早期object-fit补充所建立的惯例，blobject-fit需要在您的CSS中包含一个巧妙的font-family黑客。

/* an example using "cover" */
.my-cover-image {
    object-fit: cover;
    font-family: 'object-fit: cover;';
}

/* an example using "contain" */
.my-contain-image {
    object-fit: contain;
    font-family: 'object-fit: contain;';
}

/* an example with positioning */
.my-cover-image {
    object-fit: cover;
    object-position: bottom left;
    font-family: 'object-fit: cover; object-position: bottom left;';
}

盈利

就这样！

当DOM加载时，blobject-fit将自动检测object-fit支持，并在必要时调整它找到的任何适配图像。

许可

本作品是免费的。您可以在《做你想做的公共许可证》第2版条款下重新分发或修改它。

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004

Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>

Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

0. You just DO WHAT THE FUCK YOU WANT TO.

捐赠

如果您觉得这项工作很有用，并希望经济上做出贡献，我们始终欢迎比特币打赏！

1Af56Nxauv8M1ChyQxtBe1yvdp2jtaB1GF

blobfolio / blobject-fit

维护者

详细信息

README

目录

特性

要求

安装

HTML

CSS

盈利

许可

捐赠