Question

我正在开发一个移动网站。用户的个人资料图片应该有圆边，类似于twitter。但是，在较小的图像上，只有一些角落受到影响，即使相同的图像在页面顶部看起来也很完美。

我的页面在这里： http://porndoraone.com/finnaRoot/index.php

谢谢！

Answer 1

问题是填充左侧和填充顶部。它们会改变元素的整体宽度和高度以及边框的位置，将它们更改为边距，你就可以了：

.userpostpics{
    width:150px; 
    height:150px; 
    border-radius: 15px; 
    margin:10px; 
    float:left; 
    margin-left: 15px;
    margin-top: 15px;
}

Answer 2

CSS 更改

中的

.userpostpics {
    width: 150px;
    height: 150px;
    border-radius: 19px;
    margin: 10px;
    float: left;
    padding-left: 20px;
    padding-top: 20px;
}

到

.userpostpics {
    width: 150px;
    height: 150px;
    border-radius: 19px;
    margin: 10px;
    float: left;
    margin-left: 20px;
    margin-top: 20px;
}

希望这会对你有帮助..

Answer 3

.userpostpics {
    width: 150px;
    height: 150px;
    border-radius: 15px;
    margin: 10px;
    float: left;
    margin-left: 20px; /* Use margin- instead */
    margin-top: 20px;  /* of padding- */
}

Answer 4

你应该像这里一样添加50％的边框半径：

.userpics {
    width: 190px;
    height: 190px;
    margin: 2px;
    border-radius: 50%;
}

img.friendpics {
    width: 200px;
    height: 200px;
    margin: 2px;
    border-radius: 50%;
}

边界半径渲染有趣

4 个答案: