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?

Possible duplicate of [Height equal to dynamic width (CSS fluid layout)](https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout) — Farahmand, Jul 20 '18 at 17:07
Possible duplicate of [css height same as width](https://stackoverflow.com/questions/21537806/css-height-same-as-width) — Farahmand, Jul 20 '18 at 17:10
Possible duplicate of [Maintain the aspect ratio of a div with CSS](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css) — Amaury Hanser, Jul 20 '18 at 17:11
I don't see an indication of whether you want the image to keep its aspect ratio or not... — Heretic Monkey, Jul 20 '18 at 17:16
@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 — Simon, Jul 20 '18 at 17:17
Possible duplicate of [CSS force image resize and keep aspect ratio](https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio); Specifically [this answer](https://stackoverflow.com/a/23675095), since it's been updated for modern browsers. — Heretic Monkey, Jul 20 '18 at 17:21
@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. — Amaury Hanser, Jul 20 '18 at 17:26
This is likely closer then: [How can I fill a div with an image while keeping it proportional?](https://stackoverflow.com/q/14142378) — Heretic Monkey, Jul 20 '18 at 17:52

Amaury Hanser · Accepted Answer · 2023-08-10T07:02:11.703

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>

If this is truly a duplicate, you probably shouldn't be answering it... — Heretic Monkey, Jul 20 '18 at 17:45
@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 — Amaury Hanser, Jul 20 '18 at 17:48
@AmauryHanser: It is wonderfull! I save alot of time! Thank you very much! — truthblue82, Feb 24 '19 at 19:02
@AmauryHanser thanks a lot this this solution, helped me a lot — Pritom, Aug 08 '20 at 04:46

GoddamnAllien · Answer 2 · 2018-07-22T07:17:44.100

1

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);

edited Jul 22 '18 at 07:17

answered Jul 20 '18 at 18:06

GoddamnAllien

70
9

score 1 · Answer 3 · answered Jul 20 '18 at 18:53

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;
}

score 0 · Answer 4 · answered Jul 20 '18 at 18:03

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 ?

score 0 · Answer 5 · answered Jul 08 '23 at 19:33

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;
}

score -1 · Answer 6 · answered Jul 20 '18 at 17:17

-1

Maybe this works for you?

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

answered Jul 20 '18 at 17:17

Ogiez

97
6

This only works with a tag that has background color or background image, not works with tag – The Anh Nguyen May 08 '20 at 09:52

Image height same as width

6 Answers6

Updated answer (05/11/2023):

Original answer: