CODEWITHSUNDEEP
htmlcssimage-scaling
Tom
Tom

Reputation: 2661

how to make dynamically loaded image with different width and height responsive in css

I load images dynamically into my webpage and make them responsive: 

<div id="images"><img id="dynamic_img" src=""/></div>

css: 

#images{
  height: 80%;
  width: 30%

}

img{
     max-height: auto 
      max-width:100%
}

Problem now is, that the images have different heights and widths. Now this works when the width of an image is longer than its height but not the other way around. (in this case max-height would be 100% and max-width: auto

Is this possible to switch these two values according to the image loaded in CSS or do I need to use JS for that?

Thanks in advance

Upvotes: 0

Views: 933

Answers (2)

Joaqu&#237;n O
Joaqu&#237;n O

Reputation: 1451

Here you have an example where images are fitted horizontal and vertically.

I used 

img {
    max-width: 100%;
    max-height: 100%;
}

Here you are: https://jsfiddle.net/jormaechea/j219ucnc/1/

Update

The key to achieve this is to set

html, body {
    height: 100%;
}

Upvotes: 1

sasha
sasha

Reputation: 821

<div id="images"><img class="img" src="" alt="" /></div>

.img
{
    width=100%;
}

your div should have width=100% for example.

don't use max-width

you can set the #images div also a with of 80% - it will be responsive and the image refits to the divs width

Upvotes: 1

Related Questions