Is it possible to take a rectangular image, turn it into a square, then circle?

Is it possible to take a rectangular image, turn it into a square, then circle?
0

#1

I managed to turn my square picture into a circular image with border-radius. But all my rectangles turn into an elliptical shape. I also want the images to be responsive and to shrink smaller for mobile devices. I managed to make them square then circular by specifying the width and height in pixels. Then doing border-radius. But its not responsive it just stays the same size no matter the screen size :cold_sweat:


#2

Here is an example using a rectangle image. Is this what you want to do? You can adjust the width property of the square class to make the images smaller or larger from the start.

HTML

ORIGINAL
<br>
<div>
<img src='https://camo.githubusercontent.com/1c87ae87f7664c869776873fc4c0ec77eb60a80e/68747470733a2f2f692e696d6775722e636f6d2f776f6a6a7838492e6a7067' class='original'/>
</div>
<br>
SQUARE
<div class="square">
  <img src='https://camo.githubusercontent.com/1c87ae87f7664c869776873fc4c0ec77eb60a80e/68747470733a2f2f692e696d6775722e636f6d2f776f6a6a7838492e6a7067' class="content"/>
</div>
<br>
ROUND
<div class="square">
  <img src='https://camo.githubusercontent.com/1c87ae87f7664c869776873fc4c0ec77eb60a80e/68747470733a2f2f692e696d6775722e636f6d2f776f6a6a7838492e6a7067' class="content round"/>
</div>

CSS

.square {
  position: relative;
  width: 50%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
}

.round {
  border-radius: 50%;
}

.original {
  width: 50%;
  height: 50%;
}