跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多。
OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP，带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕。
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕或安装APP。
  3. 轻敲安装进行确认。
  • 选择语言

CSS object-fit Property

Cavalry
在 教程

推荐的帖子

  • 行政经理

CSS object-fit Property

CSS object-fit Property

The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.

This property can take one of the following values:

  • fill - This is default. Does not preserve the aspect ratio. The image is resized to fill the container (the image will be stretched or squeezed to fit).
  • cover - Preserves the aspect ratio, and the image fills the container. Cuts overflowing content if needed.
  • contain - Preserves the aspect ratio, and fits the image inside the container, without cutting - leaves empty space if needed.
  • none - The image is not resized.
  • scale-down - the image is scaled down to the smallest version of none or contain.

Using object-fit: fill;

The object-fit: fill; value does not preserve the aspect ratio, and the image is resized to fill the container (the image will be stretched or squeezed to fit):

Paris

Example

.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
Try it Yourself »

Using object-fit: cover;

The object-fit: cover; value preserves the aspect ratio, and the image fills the container. The image will be clipped to fit:

Paris

Example

.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
Try it Yourself »

Using object-fit: contain;

The object-fit: contain; value preserves the aspect ratio, and fits the image inside the container, without cutting - will leave empty space if needed:

Paris

Example

.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
Try it Yourself »

Using object-fit: none;

The object-fit: none; value does not resize or scale the image:

Paris

Example

.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: none;
}
Try it Yourself »

Using object-fit: scale-down;

The object-fit: scale-down; value scales the image down to the smallest version of none or contain:

Paris

Example

.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
Try it Yourself »

Another Example

Here we have two images and we want them to fill the width of 50% of the browser window and 100% of the height of the container.

In the following example we do NOT use object-fit, so when we resize the browser window, the aspect ratio of the images will be destroyed:

Example

Norway Paris

Try it Yourself »

In the next example, we use object-fit: cover;, so when we resize the browser window, the aspect ratio of the images is preserved:

Example

Norway Paris

Try it Yourself »

CSS object-* Properties

The following table lists the CSS object-* properties:

Property Description
object-fit Specifies how an <img> or <video> should be resized to fit its container
object-position Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box"

  • 引用

    • 参与讨论

    你可立刻发布并稍后注册。 如果你有帐户，立刻登录发布帖子。

    游客
    回帖…
    转到主题列表

    帐户

    导航

    搜索

    搜索

    配置浏览器推送通知
    Chrome (安卓)
    1. 轻敲地址栏旁的锁形图标。
    2. 轻敲权限 → 通知。
    3. 调整你的偏好。
    Chrome (台式电脑)
    1. 点击地址栏中的挂锁图标。
    2. 选择网站设置。
    3. 找到通知选项并调整你的偏好。