CODEWITHSUNDEEP
cssresponsive-designgeometry
Toniq
Toniq

Reputation: 5006

Css responsive circle with image inside

Blue div has fixed height and responsive width, inside there should be a circle image with same height.

This is what I have tried:

https://jsfiddle.net/xnkkrhnt/1/

How do I make perfect centered circle always 100% height of blue div (until blue div width because smaller than height) and image always covering full circle?

<div class="player-holder">
    <div class="player-thumb"><img src="http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg"/></div>
</div>

Upvotes: 3

Views: 14468

Answers (3)

pol
pol

Reputation: 2701

It's probably better to use background.

Try this:

.player-holder{
	height:350px;
  max-width:650px;
  background:blue;
}
.player-thumb{
  margin: auto;
	 height: 100%;
   border-radius: 100%;
   overflow:hidden;
   background-color: white;
   background-image: url("http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
}
<div class="player-holder">
  <div class="player-thumb"></div>
</div>

Or on jsfiddle: here.


Also,
in order to make a perfect circle, you will need a square size div (350x350 in your case).
Try this jsfiddle: link.

.player-holder {
  height: 350px;
  max-width: 650px;
  min-width: 350px;
  /* assign a min-width */
  background: blue;
}
.player-thumb {
  margin: auto;
  height: 100%;
  width: 350px;
  /* make a fixed width */
  border-radius: 100%;
  overflow: hidden;
  background-color: white;
  background-image: url("http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
<div class="player-holder">
  <div class="player-thumb"></div>
</div>

Upvotes: 1

Radames E. Hernandez
Radames E. Hernandez

Reputation: 4425

If you want a perfect circle firts your image needs to be square example 300x300 or 500x500, but your image is 360x270, for that reason you have getting a oval.

If you can't make that image a square, you can create a div with dimensions like square, here the example:

HTML

<div class="player-holder">
  <div class="player-thumb"></div>
</div>

CSS

.player-holder{
   height:350px;
   max-width:650px;
   background:blue;
   text-align: center;
}
.player-thumb{
   width: 350px;
   height: 350px;
   display: inline-block;
   border-radius: 50%;
   background-image: url(http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg);
   background-size: cover;
   background-position: center;
}

Here the example: https://jsfiddle.net/xnkkrhnt/5/

Regards

Upvotes: 6

MohammadReza Mahmoudi
MohammadReza Mahmoudi

Reputation: 1324

It's possible with background-size but you have to use images on background.

HTML:

<div class="player-holder">
  <div class="player-thumb"></div>
</div>

CSS:

.player-holder{
   height:350px;
   max-width:650px;
   background:blue;
}
.player-thumb{
   height: 100%;
   border-radius: 100%;
   overflow:hidden;
   background: url(http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg);
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

Demo: https://jsfiddle.net/xnkkrhnt/3/

Upvotes: 0

Related Questions