How can I display an image full size inside of a CSS circle?
Question
I tried to put an image inside a circle as presented below, but it appears to be shrunken. What changes I should make to the code?
<!doctype html> <html> <head> <style> #circle { background: skin-tone.jpg; background-size: cover; border-radius:50% 50% 50% 50%; width:400px; height:400px; } </style> </head> <body> <img src="http://conversationsabouther.net/wp-content/uploads/2014/12/cara-delevingne.jpg" id="circle"> </body> </html>
2 answers
solution1
2 ACCPTED 2018-01-29 21:26:59
You can use the image as a background instead:
#circle { background-size: cover; background-position:center; border-radius: 50% 50% 50% 50%; width: 400px; height: 400px; }
<div style="background-image:url(http://conversationsabouther.net/wp-content/uploads/2014/12/cara-delevingne.jpg)" id="circle"></div>
solution2
0 2018-01-29 21:36:52
The reason is that your image is not exactly the size of the shape (400px * 400px).
If your image is never going to be correct then I would do the following:
.circle { position: relative; border-radius: 100%; width:400px; height:400px; overflow: hidden; } .circle__image { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate3d(-50%, -50%, 0); }
<!doctype html> <html> <body> <div class="circle"> <img class="circle__image" src="http://conversationsabouther.net/wp-content/uploads/2014/12/cara-delevingne.jpg" title="skin tone"> </div> </body> </html>
Personally, I would try and get the image the same the same size as the parent clipping mask. However, life is not like that. This code will auto-fill the container. Based height, not the width.
The translate3d will always the image centre.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.