html - 使背景图片适合边框 HTML/CSS

Question

我正在制作一个测试网页来学习 html/css。我想将图像模制成边框的形状。这应该不是什么大问题，但图像似乎没有位于边框的中心。当我更改图像大小等时，图像似乎更多地位于页面中间并离开边框等。我只希望它完全适合边框，并沿着边框边缘剪裁照片.我对此有疑问。

我怎样才能让图片直接居中并填满整个边框，而不是照片的中间或大部分照片留在边框之外？

#pic {
    float:right;
    transform: rotate(90deg);
}
#bod {
    height:300px;
    width:300px;
    border: 5px ridge blue;
    float:right;
    border-radius: 105px 105px 0px 0px;
    overflow:hidden;
    background-image: url("smile.jpg");
    background-size: 800px 800px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

<div id="bod">
    <div id="pic">
        <img src="http://lorempixel.com/800/500" />
    </div>
</div>

Answer 1

更改 #bod 的 CSS以下选择器:

#bod {
    border-radius: 105px 105px 0px 0px;
    border: 5px ridge blue;
    height: 300px;
    width: 300px;
    float: right;
    overflow: hidden;
    background-image: url("smile.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
}

为了清楚起见，我删除了 background-attachment样式定义中的属性并更改了 background-size 的值属性为 cover ，这是重要的部分。

更新

您之前通过设置 background-image 通过 CSS 设置了图像至 url("smile.jpg")在#bod造型。我猜不再需要该行，因为您现在在 HTML 中设置图像:<img src="http://lorempixel.com/800/500" />相反。

该图像现在偏离中心，要修复该问题，请更改您的 #pic样式如下:

#pic {
    float: right;
    transform: rotate(90deg);
    transform-origin: 50% 50%;
    height: 100%;
    width: 100%;
}

我添加了 transform-origin , width和 height #pic 的属性造型。