Trung tâm cá nhân
sách gpt4 ăn đã đi

html - 背景大小之间的差异 :cover and background-size:contain

In lại 作者：技术小花猫 更新时间：2023-10-29 11:55:24 27 4
mua khóa gpt4 giày nike

在视觉上我可以体会到差异，但在哪些情况下我应该更喜欢其中一种呢？使用它们有什么意义，还是可以用百分比代替？

目前，在使用这些属性时，我似乎无法超越试错法，这让我很头疼。

我也只能找到非常模糊的解释，尤其是我找到了 W3C doc非常莫名其妙。

Values have the following meanings:

‘contain’

Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

‘cover’

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

我可能有点厚，但是谁能给我一个通俗易懂的英文解释和相关的例子？

请使用this fiddle .谢谢。

CSS

thân hình{
    width:500px;
    height:500px;
    background:url(../../../wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-size:contain;
    background-repeat:no-repeat;
}

Để ý

接受的答案是我目前认为最简洁和完整的答案。感谢大家的帮助。

câu trả lời hay nhất

您可以考虑查看控制输出的伪代码。分配给图像大小的值直接取决于容器的宽高比与背景图像的宽高比。

Để ý: 宽高比=宽/高

包含

if (aspect ratio of container > aspect ratio of image)
    image-height = container-height
    image-width = aspect-ratio-preserved width

khác
    image-width = container width
    image-height = aspect-ratio-preserved height

che phủ

if (aspect ratio of container > aspect ratio of image)
    image-width = container width
    image-height = aspect-ratio-preserved height

khác
    image-height = container height
    image-width = aspect-ratio-preserved width

你看到关系了吗？在 cover Và contain 中，纵横比都保持不变。但是 if - else 条件在这两种情况下都相反。

这就是使 cover 覆盖整个页面的原因，没有任何白色部分可见。当容器的纵横比较大时，缩放图像使其宽度等于容器宽度。现在，高度会更大，因为纵横比更小。因此它覆盖了整个页面，没有任何白色部分。

问。可以用百分比代替吗？

不，不仅仅是百分比。你需要调理。

问。在哪些情况下我应该更喜欢其中一种？

当您创建网站时，您不希望固定背景中有任何白色部分。所以使用cover。

contain 另一方面可以在您使用重复背景时使用(例如，当您的图案图像具有非常高的纵横比 wrt veiwport/container 时，您可以使用 contain 并将 background-repeat 设置为 repeat-y)。但是 contain 更合适的用途是用于固定高度/宽度的元素。

关于html - 背景大小之间的差异 :cover and background-size:contain，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27939971/

27 4 0
Đề xuất bài viết: css - 使一个 div 可见，另一个不可见
Đề xuất bài viết: CSS3 形状 - 什么是可能的？
Đề xuất bài viết: css - HTML SPAN 标记拉伸(stretch)到可用宽度
Đề xuất bài viết: javascript - VueJS - 防止链接点击默认但也捕获对象
技术小花猫
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress