如何在css中制作圆形图像 [英] How to make a circular image in css

问题描述

我对这种事情很陌生，但这是我的问题.我看了几个问题，如何使它变为圆形是有意义的，但是使圆形的图像被切除一半，有没有办法解决这个问题.我正在使用HTML和CSS.

I'm very new to this sort of thing but this is my issue. I've looked through a couple of questions and it makes sense with how to make it circular but the image which is made circular is half cut off, is there a way of fixing this. I am using HTML and CSS.

circular_image {
  float: left;
  margin-left: 125px;
  margin-top: 20px;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  overflow: hidden;
  background-color: blue;
}

推荐答案

您的CSS规则需要一个.((如果与 class 一起使用，则为>)或#((如果应用了 id )的话).

Your css rule needs a . (if it applied with a class) or # (if it is applied with an id) at the start.

此外，如果您将规则应用于图片的容器，则需要将图片设置为相应地调整大小以适合圆形；

Also if you apply the rule to a container of the image you need to set the image to re-size accordingly to fit the circle;

最后，半径为 50％就是一个圆.

Finally, 50% radius is all you need for a circle.

.circular_image {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  background-color: blue;
  /* commented for demo
  float: left;
  margin-left: 125px;
  margin-top: 20px;
  */
  
  /*for demo*/
  display:inline-block;
  vertical-align:middle;
}
.circular_image img{
  width:100%;
}

with container

<div class="circular_image">
  <img src="http://placekitten.com/500/500"/>
</div>

<br><br>
directly on image

<img class="circular_image" src="http://placekitten.com/g/500/500"/>

这篇关于如何在css中制作圆形图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！