CODEWITHSUNDEEP
htmlcss
Bruno Andrade
Bruno Andrade

Reputation: 595

Responsive image aspect ratio of height

I have an image of 768px x 432px. I make it responsive, but I want the aspect ratio to be calculated based on the value of 350px x 250px.

I can do this with the width but not with the height.

How could I do it?

What am I using for width:

.thumb {
    width: 100%;
    max-width: 350px;
}


.thumb {
  width: 100%;
  max-width: 350px;
  max-height: 250px;
  height: 100%;
}
<div class="container">
  <div class="row">
    <div class="col col-md-4">
      <img src="http://lorempixel.com/768/432/technics/" class="thumb">
    </div>
  </div>
</div>

Upvotes: 1

Views: 492

Answers (1)

StarShows Studios
StarShows Studios

Reputation: 99

try in the css using the vh /vw tags for responsive cross platform page fitting.

for example: vh - view-height vw - viewwidth

.thumb {
  width: 100%;
  max-width: 30vw;
  max-height: 25vh;
  height: 10vh;
}

Just a side note, When your thinking of page width -- imagine the full page width being 100vw so 30vw would basically be a bit less than a third of the page no matter the size of a page. same idea with the height.

Upvotes: 1

Related Questions