CODEWITHSUNDEEP
htmlcsssass
Simon
Simon

Reputation: 2538

Image height same as width

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?

Upvotes: 19

Views: 45168

Answers (6)

Amaury Hanser
Amaury Hanser

Reputation: 3456

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>

Upvotes: 57

NME New Media Entertainment
NME New Media Entertainment

Reputation: 737

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

Upvotes: 0

GoddamnAllien
GoddamnAllien

Reputation: 70

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

Upvotes: 1

Axion
Axion

Reputation: 722

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

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105883

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 ?

Upvotes: 0

Ogiez
Ogiez

Reputation: 107

Maybe this works for you?

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

Upvotes: -1

Related Questions