使背景圖像適合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 ，這是重要的部分。

更新

您之前已通過#bod樣式中將background-image設置為url("smile.jpg")通過CSS設置了該background-image 。 我猜測不再需要該行，因為您現在使用<img src="http://lorempixel.com/800/500" />在HTML中設置圖像。

該圖像現在偏離中心，以解決將#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/