CODEWITHSUNDEEP
htmlcss
FlyingUnderpants
FlyingUnderpants

Reputation: 101

Make height responsive / let it stay in ratio

Currently I'am working on a responsive image-slider but there is something I need to know before I can make my slider completely responsive, and that is how can I code that the automaticly adjust to the width(Like that it stays in a ratio, 16:9 for example)? My code is something like this (simplified).

    <div style="width: 100px; height: 50px;" id="container">
<img src="" style="width: 100%, height:100%" id="inside">
</div>

I already tried like padding-bottom 70% etc. but that doesn't work for me because (I think) the inside is like relative to the containers height not padding?

Upvotes: 0

Views: 55

Answers (2)

Floris de Boer
Floris de Boer

Reputation: 63

To keep the image in ratio, you can use 

#container {
  width: 100px;
  height: 50px;
}

#container img {
  width: 100%;
  height: auto;
}
<div id="container">
<img src="http://florisdeboer.com/Screenshot%20(80).png" id="inside">
</div>

Upvotes: 1

Pietro
Pietro

Reputation: 988

To keep the ratio, you should start with

width: 100% and height: auto

Try to make a working fiddle to better explain what you need

Upvotes: 2

Related Questions