将背景图像适合边框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，这是重要的部分。

update

您以前通过将background-image设置为#bod样式中的url("smile.jpg")通过CSS设置图像。我猜不需要这条线，因为您现在正在使用以下方式设置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样式。

Answer 2

旋转中心位于DIV的中间，因此您必须确保中心位于正确的位置。您应该这样做：

#pic {
width:100%;
height: 100%;
transform: rotate(90deg);
}
#pic img{
width: 100%;
height: 100%;
}

https://jsfiddle.net/ebc5yjzu/3/