CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
cup_of
cup_of

Reputation: 6697

Make an image with a percentage width a perfect square using css

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!

Upvotes: 0

Views: 4916

Answers (4)

Michael Benjamin
Michael Benjamin

Reputation: 372244

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.com/450/300">
</div>

Upvotes: 1

Christopher
Christopher

Reputation: 96

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

Upvotes: 2

kukkuz
kukkuz

Reputation: 42370

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>

Upvotes: 3

Bishal
Bishal

Reputation: 837

You could do so with the following jQuery

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

Hope that helps.

Upvotes: 1

Related Questions