Question

我为我的图片创建了一个框架，但是有一点问题！正如您在下面的代码中看到的那样，框架的底部消失了：/，我不知道为什么???请有人帮帮我吗？！

＆＃13;

.framed-image {
    width: 200px;
    height: 200px;
    background: url("https://image.ibb.co/kXCWvS/frame.png") no-repeat;
    background-size: cover;
    padding: 18px;
    object-fit: cover;
}

＆＃13;

<img class="framed-image" src="http://placehold.it/1/365f83">

＆＃13;

Answer 1

您应用background-image的{{1}}是正方形，但背景图像来源不是。您正在使用background-size: cover来定义背景在空间中的渲染方式。

来自MDN Docs这里是＆＃39;涵盖＆＃39;作用：

在不拉伸图像的情况下尽可能大地缩放图像。如果图像的比例与元素不同，它被裁剪垂直或水平，以便不留空的空间。

这意味着您使用的背景图像正在填充图像的宽度，底部会被裁剪掉。

要使框架扭曲以适合方形，您应将background-size属性设置为：

background-size: 100% 100%;

这将使其高度和宽度与其应用的项目的高度和宽度相匹配。

＆＃13;

.framed-image {
    width: 200px;
    height: 200px;
    background: url("https://image.ibb.co/kXCWvS/frame.png") no-repeat;
    background-size: 100% 100%;
    padding: 18px;
    object-fit: cover;
}

＆＃13;

<img class="framed-image" src="http://placehold.it/1/365f83">

＆＃13;

Answer 2

您的背景框图像的高度大于您使用的所需图像尺寸。你可以使用背景作为每张图片的拉伸，或者你可以改变图像的大小以适应框架。

背景框架的底部消失了

2 个答案: