Bootstrap 4 - 將圖像裁剪成圓形 - 風景照片未被正確裁剪

我試圖將任何尺寸的照片裁剪成120 x 120像素。 Bootstrap不會帶有很好的圓形裁剪，所以我使用bootstrap 4的img-fluid和overflow:hidden + border-radius的組合來實現此目的。Bootstrap 4 - 將圖像裁剪成圓形 - 風景照片未被正確裁剪

這適用於人像照片（高度>寬度），但對於風景照片like this，結果is this。

HTML：

<div style="overflow:hidden; height:120px; width:120px; border-radius:50%;"> 
    <img class="img-fluid" src="picture.png" alt='Agent picture' /> 
</div>

如何剪裁風景照片是否正確？

來源

2017-12-02 Valachio

不知道這是否符合您的需求，但您可以使用background-image屬性來完成此操作。這是一個工作CodePen。

HTML：

<div class="agent-image"></div>

CSS：

.agent-image{ 

    background-image:url("https://i.gyazo.com/da27f072059db48590e3b9da9d7789c2.jpg"); 
    background-position:center; 
    background-size:cover; 
    height: 120px; 
    width: 120px; 
    border-radius: 50%; 

}

來源

2017-12-02 20:03:13 infamoustrey

謝謝。這工作。我更喜歡使用，因爲它感覺更自然（可能是一個愚蠢的假設），但是無論什麼作品都有效！ – Valachio

可能有辦法讓''得到一個工作，雖然它可能比這更多的工作，也可以使用這個方便的Dandy位置屬性來使用你想要的部分img – infamoustrey

我做了一些工作並意識到很多我的圖像不再是響應大小的，因爲來自Bootstrap的img-fluid（響應性地調整圖像大小）僅適用於''。我要回溯，看看我能否找到解決方案 – Valachio

Bootstrap 4 - 將圖像裁剪成圓形 - 風景照片未被正確裁剪

回答

相關問題