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：允许任何宽度，但设置为正方形

回答

相关问题