Image height same as width

Question

I have an image inside of a container and I want it to be a perfect square. I'm setting my width to be 100% of the container and the goal is to get the height of the image to be the same as the width, as I don't know what size the container will be due to responsive design.

Any ideas? I'm using sass, if that helps..

.container {
width: 50%;
}

.container img {
  width: 100%;
  height: 400px; //this should be the same as the width value..
}

<div class="container"><img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/></div>

Preferably no javascript solution, but maybe it's not possible otherwise?

Educator

Possible duplicate of Height equal to dynamic width (CSS fluid layout) – Kal

i think there is no pure css solution – Purificator

Possible duplicate of css height same as width – Kal

Set padding to 100% – Klondike

Possible duplicate of Maintain the aspect ratio of a div with CSS – Thousand

@mr.void There is a css solution. Sell all posted links. – Thousand

I don't see an indication of whether you want the image to keep its aspect ratio or not... – Cantilena

@HereticMonkey yes, it should keep aspect ratio.. i guess the container should be a perfect square and the image should either be a square or centered – Educator

Possible duplicate of CSS force image resize and keep aspect ratio; Specifically this answer, since it's been updated for modern browsers. – Cantilena

@HereticMonkey I think that the author needs to fit an image (any aspect ratio) in a responsive square. As you can see, in his exemple, the image isn't a square. – Thousand

This is likely closer then: How can I fill a div with an image while keeping it proportional? – Cantilena

Answer 1

Updated answer (05/11/2023):

CSS is an always evolving language and we can now use aspect-ratio.

This solution requires less code and is less hacky, that's what I would use today.

aspect-ratio:
The aspect-ratio CSS property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

aspect-ratio on MDN
CSS property: aspect-ratio on caniuse

.container {
  width: 50%;
}

.container img {
  width: 100%;
  aspect-ratio: 1 / 1;  /* defining the aspect ratio of the image */
  object-fit: cover;    /* making sure the image isn't distorted */
}

<div class="container">
  <img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
</div>

---

Original answer:

Many of us had given you some hints in the comments, so by now you should be able to create a responsive square.

Fit the image inside the square Just in case you are missing the last part, here is how you can fit the image (with any aspect ratio) into that square. It also means that your image will be cropped if it's not squared.

Snippet:

.container {
  position: relative;
  width: 37%; /* The size you want */
}
.container:after {
  content: "";
  display: block;
  padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

.container img {
  position: absolute; /* Take your picture out of the flow */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* Make the picture taking the size of it's parent */
  width: 100%; /* This if for the object-fit */
  height: 100%; /* This if for the object-fit */
  object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
  object-position: center;
}

<div class="container">
  <img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>

Thousand

If this is truly a duplicate, you probably shouldn't be answering it... – Cantilena

@HereticMonkey I know, but I couldn't find an asnwer for an image inside the square. All the answers I've read were only talking about the creation of the square. If I find one with the image, I'll delete the answer – Thousand

@AmauryHanser: It is wonderfull! I save alot of time! Thank you very much! – Boyceboycey

@AmauryHanser thanks a lot this this solution, helped me a lot – Titrate

this actually solved my problem. don't delete this post. – Cassowary

Answer 2

Add this to the top of your styling file:

    :root{
  --size: 100px;
}

Then give the defined variable to both width and height:

width: var(--size);
height: var(--size);

Jenisejenkel

Answer 3

If you're willing to use a background image then this solution will work https://codepen.io/anon/pen/jpyrwB .

This will keep a square ratio and make the image cover the whole div. It will also keep the image centered and crop the sides if the image is wider than the height.

HTML

<div class='square-box'>
    <div class='square-content'></div>
</div>

CSS

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-position: center;
    background-size: 100% 100%;
    background-size: cover;
}

Hexagon

Answer 4

Another trick could be to use the image itself into its own background, then apply the vertical padding method with an height of 0.

demo below (with a dummyimage, yours doesn't show for me)

.container {
  width: 50%;
}

.container img {
  width: 100%;
  height: 0px;/* padding will mage sizing here */
  padding: 50% 0;/* make it a square = 100% vertical padding , none horizontal*/
  background-image: url(http://dummyimage.com/750x1260/951&text=My_BG_Image);/* used a different color from the one in the tag */
  background-size: 100% 100%;
  /* reset just in case */
  background-clip: border-box;
  box-sizing:border-box;
}

<div class="container"><img src="http://dummyimage.com/750x1260/159&text=My_Image" /></div>

Note, i also used the size of your image which is also not a square. Did you mind about stretching too ?

Hundley

Answer 5

I was looking for an allround solution for bootstrap 5. Here is a bootstrap 5 solution for a 100% width perfect circle image:

HTML

<div class="imageContainer position-relative w-100 rounded-circle overflow-hidden">
   <img class="position-absolute top-0 start-0 w-100 h-100" src="https://placekitten.com/100/200" loading="lazy"/>
</div>

CSS

.imageContainer {
    height: 0;
    padding-bottom: 100%;
}

.imageContainer img{
    object-fit: cover;
}

Colan

Answer 6

Maybe this works for you?

.container img {
 width: 100%;
 padding-bottom: 100%;
}

Apennines

This only works with a tag that has background color or background image, not works with <img> tag – Joacima