CODEWITHSUNDEEP
htmlcss
Sayed
Sayed

Reputation: 1062

<img> height equals to its width inside a div

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: enter image description here

and this is what I'm trying to achieve: enter image description here

Upvotes: 4

Views: 6591

Answers (6)

hetal
hetal

Reputation: 399

try this

img{
aspect-ratio:1;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

Upvotes: 2

Joseph Marikle
Joseph Marikle

Reputation: 78520

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">
        <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="album_photo">
        <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="album_photo">
        <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a>
      </div>
    </div>
    <div class="col-xs-3">
      <div class="album_photo">
        <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Trong Lam Phan
Trong Lam Phan

Reputation: 2412

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

Upvotes: 4

Mike B
Mike B

Reputation: 1446

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.

Upvotes: 0

john_h
john_h

Reputation: 149

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.

Upvotes: -1

Marat Tanalin
Marat Tanalin

Reputation: 14123

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

Upvotes: 1

Related Questions