css：允許任何寬度，但設置爲正方形

在我的網站上，我有幾個圖像是用戶配置文件圖像。在不同的地方，圖片的尺寸不同，但我希望它始終有一個圓潤的邊緣，並始終呈方形。css：允許任何寬度，但設置爲正方形

目前我有：

img.profile_pic {border-radius: 50%; 
    border: 0px;}

，然後用其他類，如wide_150使其150px寬。

有沒有什麼辦法強制使用css的圖片爲正方形？

來源

2015-01-27 Ramsay Smith

javascript有點像width = height，反之亦然？ – Martin 2015-01-27 00:23:00

那麼你現在擁有什麼問題？ – Randy 2015-01-27 00:40:19

@Randy目前，我有設置邊框半徑的樣式。我想要做的是爲所有的個人資料圖片創建一個通用規則，使其成爲正方形，並允許其他類指定實際大小。 – 2015-01-27 01:05:06

嘗試類似：

<script> 
function setAspectRatio() { 
    var widthOfUserImage1 = document.getElementById('UserImage1').style.width; 
    document.getElementById('UserImage1').style.height = widthOfUserImage1; 
    } 

window.onload = setAspectRatio(); 
</script>

來源

2015-01-27 00:36:14 Rounin

也許這個例子可以幫助你。 https://selbie.wordpress.com/2011/01/23/scale-crop-and-center-an-image-with-correct-aspect-ratio-in-html-and-javascript/
在CSS中有一個例子，然後在JavaScript中更好的方法。

來源

2015-01-27 00:42:31

您可以將用戶配置文件圖像設置爲背景。將寬度和高度設置爲適用於border-radius的平方。

使用background-size: contain;在正方形內繪製輪廓圖像。邊框上的半徑將剪切圖像。

來源

2015-01-27 00:52:18 Mouser

這裏有一個竅門：

div { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    border-radius: 50%; 
 
    }

<div style="background-image: url(http://placehold.it/350x150)"></div>

只需使用一個風格爲你的形象的 'SRC'。

來源

2015-01-27 00:54:32

css：允許任何寬度，但設置爲正方形

回答

相關問題