<img> height equals to its width inside a div - html

Question

First of all, I'm not really good with CSS but I'm trying to make the <img> height equals the width of it using only CSS.
I'm also using bootstrap as shown below, so the width of each column is responsive.
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
.album .album_photo .photo_link img {
width: 100%;
}
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<a href="#" class="photo_link">
<img src="someurl" />
</a>
</div>
</div>
</div>
This is how it looks like right now:
and this is what I'm trying to achieve:

Answer 1

Take a look at this pen, you'll know how to do that using padding-bottom trick:
Code pen
.album_photo {
position: relative;
padding-bottom: 100%;
overflow: hidden;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Answer 2

Consider using image as background in conjunction with background-size: cover.

Answer 3

I like this method. It makes the content of the column (in this case .album_photo) position: relative, sets the inner wrapper of the element ('.photo_link img') position: absolute; with a height of 100%. To keep the shape of the column, you use a pseudo-element that has a padding-top: 100%. The reason why this works is because percentage based padding is always relative to the width of the element. Thus with a padding of 100%, it will always be just as tall as it is wide. You can use the same method to create ratio based container sizes too (e.g. 3:1 ratio for slideshows having absolutely positioned slides). It's a neat trick.
#import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);
.album_photo {
position: relative;
overflow: hidden;
}
.photo_link img {
position: absolute;
top: 0;
left: 0;
}
.album_photo:after {
content: '';
display:inline-block;
vertical-align: top;
width: 100%;
height: 0;
padding-top: 100%;
}
<div class="container">
<div class="album">
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
<div class="col-xs-3">
<div class="album_photo">
<img src="//placehold.it/300x200" />
</div>
</div>
</div>
</div>

Answer 4

try this
img{
aspect-ratio:1;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Answer 5

You can scale the images in any way, by simply applying a width & height. For example, You can say
.full-width-height { width: 100%; height: 100%; }
You can also use min-width, max-width, min-height and max-height.
However, you will run into aspect ratio issues with this.
You have two options that will keep aspect ratios in check using CSS and
.auto-width { width: auto; height: xxx; }
.auto-height { width: xxx; height: auto; }
Bootstrap provides a responsive class you can use as well. The class is img-responsive which you can read about here. This class is often used with center-block helper class.

Answer 6

you want your "album_photo" class to have a width and height of 100%, because those will fill the space in the parent element which has a class of "col-xs-3"
CSS:
.album_photo {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
set margin and padding to 0 and you will see that the img fits nicely in the parent element.