Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css] 第729天 使用css实现圆形的头像的效果(注:要考虑正方形、长方形情况) #3814

Open
haizhilin2013 opened this issue Apr 13, 2021 · 1 comment
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第729天 使用css实现圆形的头像的效果(注:要考虑正方形、长方形情况)

3+1官网

我也要出题

@haizhilin2013 haizhilin2013 added the css css label Apr 13, 2021
@Eacolt
Copy link

Eacolt commented Apr 14, 2021

CSS, 命名一个App.css:
`.circle{
position: relative;
border:2px solid black;
width:100px;
height:100px;
border-radius: 50%;
overflow: hidden;
}
.circle img{
position: relative;
height:auto;
max-width: 100%;
object-fit: cover;
top:50%;
transform: translate(0%,-50%);
border-radius: 50%;

}
`
HTML部分,我使用的是React:
随便用Img元素,引入任意一个图片,把img元素包裹在一个div里,div类名是circle

`
import './App.css'
export function App(){
return (


<div className={"circle"}><img src={'./img/158.png'}/>

);
}

`

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css css
Projects
None yet
Development

No branches or pull requests

2 participants