javascript - How to fit img into div circle ? - Stack Overflow

admin管理员组

文章数量:1295773

I'm beginner in HTML/CSS.

I've created some div that looks like a circle. I want to put facebook image into that circle, but as a circle logo.

HTML

<div class="social" id="social1"> Facebook
  <a href="www.facebook">
    <img src=".png" width="106" height="106"/> 
     </a>
</div>

CSS

div {
     display: inline-block;
     margin-left: 55px;
     height: 100px;
     width: 100px;
     border-radius: 100%;
     border: 2px solid black;
     text-align:center;
   }

img {
     width: 100%;
     height : 100%;
     object-fit: contain;
    }

How to fit img into div circle ?

I'm beginner in HTML/CSS.

I've created some div that looks like a circle. I want to put facebook image into that circle, but as a circle logo.

HTML

<div class="social" id="social1"> Facebook
  <a href="www.facebook.com">
    <img src="https://www.facebook.com/images/fb_icon_325x325.png" width="106" height="106"/> 
     </a>
</div>

CSS

div {
     display: inline-block;
     margin-left: 55px;
     height: 100px;
     width: 100px;
     border-radius: 100%;
     border: 2px solid black;
     text-align:center;
   }

img {
     width: 100%;
     height : 100%;
     object-fit: contain;
    }

How to fit img into div circle ?

• javascript
• html
• css

Share Improve this question Follow edited Jun 3, 2016 at 2:21 j08691 208k3232 gold badges267267 silver badges280280 bronze badges asked Jun 2, 2016 at 19:36 Orkun OzOrkun Oz 17922 gold badges22 silver badges1010 bronze badges 4

• 1 You could make the image a background-image of the div. – Kyle Hawk Commented Jun 2, 2016 at 19:39
• 1 overflow : hidden; have you tried that ? – G-Cyrillus Commented Jun 2, 2016 at 19:40
• Check stackoverflow.com/questions/22577371/… – Chinni Commented Jun 2, 2016 at 19:42
• object-fit isn't supported in IE or Edge – Blazemonger Commented Jun 2, 2016 at 19:46

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 11

.social .facebook {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: url(https://www.facebook.com/images/fb_icon_325x325.png);
  background-position: 50% 50%;
  background-size: cover;
  border-radius: 50%;
}

<div class="social" id="social1">
  <a class="facebook" href="https://www.facebook.com/"></a>
</div>

Basically there are two ways to achieve this.

1. You could add border-radius: 50%; to the img element.
2. You could add overflow: hidden; to the div element.

Both will work. You should remove the "Facebook" string to get proper positioning of the image.

You were very close. The text content "facebook" of the DIV is taking up room and needs to be removed. It can be replaced by alt text to display if the image is not available, with a title attribute that typically displays as a tooltip. Height and width are not needed for the IMG element since it is specified in CSS:

<div class="social" id="social1">
  <a href="https://www.facebook.com">
     <img src="https://www.facebook.com/images/fb_icon_325x325.png"
      alt="facebood" title="facebook"> 
  </a>
</div>

Besides this you only need to add overflow: hidden as a property for the div CSS

---

Alternatively if you want to support IE and Edge which (from @Blazemonger 's comment) don't support object-fit, you could add the image as a background attachment of the DIV and make the DIV itself the link element's content (without an alt text option):

HTML

<a href="https://www.facebook.com">
   <div class="social" id="social1" title="facebook">
   </div>
</a>

and include

background-image: url("https://www.facebook.com/images/fb_icon_325x325.png");
background-size: cover;
overflow:hidden;

in CSS for the div element.

overflow:hidden; + position:relative/absolute to not mind the text aside image :

div {
  display: inline-block;
  margin-left: 55px;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 2px solid black;
  text-align: center;
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="social" id="social1">Facebook
  <a href="www.facebook.com">
    <img src="https://www.facebook.com/images/fb_icon_325x325.png" width="106" height="106" />
  </a>
</div>

You could set a border radius in CSS to round the image like so:

img {
 width: 100%;
 height : 100%;
 object-fit: contain;
 border-radius: 999px;
}

Example: http://codepen.io/JasonGraham/pen/zBGYgx

Well you can do this :

div {
  display: inline-block;
  margin-left: 55px;
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 2px solid black;
  text-align: center;
  background: url("https://www.facebook.com/images/fb_icon_325x325.png") center no-repeat;
  background-size: cover
}

<a href="https://www.facebook.com/">
  <div class="social" id="social1"></div>
</a>

img{
border-radius: 100%;
object-fit:cover
}

This will position the image so that it appears centered and cropped and round its edges.

Add border-radius:100% to your img css code segment as well.

img {
     width: 100%;
     height : 100%;
     border-radius:100%;
}

本文标签： javascriptHow to fit img into div circle Stack Overflow