Hello I have an image in a container that is set to width: 100%.

I was wondering if there's any way to can have a height generated to make it a perfect square.

So say the original image is 450px wide and 300px tall.

The css gives it a width of 100% so it stretches and fills the container, but the image remains rectangular.

Is it possible to do some css or jquery trick to generate a height to make this image a perfect suqare?

I don't care if the image gets cropped or stretched out and looks funky, I just need it to be a perfect square.

Thanks!

Hello I have an image in a container that is set to width: 100%.

I was wondering if there's any way to can have a height generated to make it a perfect square.

So say the original image is 450px wide and 300px tall.

The css gives it a width of 100% so it stretches and fills the container, but the image remains rectangular.

Is it possible to do some css or jquery trick to generate a height to make this image a perfect suqare?

I don't care if the image gets cropped or stretched out and looks funky, I just need it to be a perfect square.

Thanks!

• javascript
• jquery
• html
• css
• image

• it is 'possible' but either you will crop the image or you will stretch the image... – kukkuz Commented Dec 21, 2016 at 3:04
• Can you create a jsfiddle to show what you have done / tried to do? – Oscar Siauw Commented Dec 21, 2016 at 3:04
• @kukkuz It doesnt matter if the image is cropped or stretched, i just need a perfect square – cup_of Commented Dec 21, 2016 at 3:05
• @OscarSiauw all i have is an image inside a containing div. the image is set to 100% width. thats all ive got so far – cup_of Commented Dec 21, 2016 at 3:06
• Do you want specific dimension or the image container have a specific dimension? – aavrug Commented Dec 21, 2016 at 3:06

4 Answers 4

So you are free to stretching out the image - this can be a CSS solution:

1. Make a square container based on the width by using padding-top: 100%

2. Position the image absolutely by stretching it out to the square container as desired.

See demo below:

.wrapper {
  border: 1px solid red;
  height: 0;
  overflow: hidden;
  padding-top: 100%;
  box-sizing: border-box;
  position: relative;
}
.wrapper img {
  width: 100%;
  vertical-align: top;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

<div class="wrapper">
  <img src="http://placehold.it/400x300" />
</div>

Using straight CSS you can set width and height to 100vw.

You could do so with the following jQuery

var img_width = $('#image').width();
$('#image').css({'height':img_width+'px'});

Hope that helps.

Since you don't care if the image is cropped or distorted, the layout is simple.

Just add overflow: hidden to the container. The image can be any size.

div {
  height: 100px;
  width: 100px;
  border: 2px solid red;
  overflow: hidden;
}

<div>
  <img src="http://www.placekitten./450/300">
</div>