小编Meg*_*Meg的帖子

如何在圈子中显示用户个人资料图片？

我正在开发一个网站,用户的个人资料图片需要以圆圈形式显示.此网站上有许多圈子,圈子大小可能会有所不同.

我可以正确显示方形图像,但垂直和水平图像我遇到问题.

我必须使用以下标准将图像显示在一个圆圈中:

假设图像大小是500x300.图像应从右侧和左侧裁剪100px,以便显示图像的中心.现在图像应该是300x300居中的.然后我需要从该图像中制作一个圆圈.或者使用CSS隐藏图像左右两侧的100px.
如果图像大小是300x500,则应使用CSS隐藏顶部和底部区域

我该怎么做才能解决这个问题？如果可能的话,CSS-only答案对我来说是最好的.

css image

har*_*h4u

2014 09-05

27
推荐指数

2
解决办法

6万
查看次数

响应对齐倾斜的Div

使用这种技术的修改版本,我已经设法为我正在研究的网站制作倾斜的,响应式的div.我divs遇到的问题是有3个倾斜在一起,它们意味着在页面上创建一条对角线(因此每个倾斜的div需要与周围的对齐线正确对齐).到目前为止,使用这些div的百分比宽度尚未奏效,但我不确定还有什么可尝试的.

对此的一个好的解决方案是响应和[优选]仅css.

*{
    margin: 0;
    padding:0;
}
.hero{
    width: 100%;
    position: relative;
    border: 1px solid black;
    background-color: green;
}
.slanted{
    position: relative;
    background-color: purple;
    width: 40%;
    padding: 3em 0 3em 1em;
}
.slanted:after{
    content: '';
    background-color: purple;
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6em;
    width: 20em;
    overflow: visible;
    z-index: 1;
    -webkit-transform: skewX(-13deg);
    -moz-transform: skewX(-13deg);
    -ms-transform: skewX(-13deg);
    -o-transform: skewX(-13deg);
    transform: skewX(-13deg);
}
.slanted h2{
    position: relative;
    z-index:3;
}
.hero1 .slanted{
    width: 30%;
}
.hero2 .slanted{
    width: …

Run Code Online (Sandbox Code Playgroud)

html css

Meg*_*Meg

lucky-day

8
推荐指数

1
解决办法

954
查看次数