html - 背景框的底部不见了

Question

我已经为我的图像创建了一个框架，但是有一个小问题!正如您在下面的代码中看到的那样，框架的底部不见了:/，我不知道为什么？？？有人可以帮帮我吗？!

.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;
}

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

Answer 1

<img>您正在申请 background-image to 是方形的，但背景图像源不是。您正在使用 background-size: cover定义背景在空间中的呈现方式。

来自 MDN Docs这是“封面”的作用:

Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

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

要使框架变形以适合方形，您应该将背景大小属性设置为:

background-size: 100% 100%;

这将使它的高度和宽度与应用它的元素的高度和宽度相匹配。

.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;
}

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