I want to reseize images with the browser. I tried:

```
<div id="imageWrapper">
  <img src="imageurl" />
</div>

<style> 
    #imageWrapper{width:100%;height:100%;padding:0 0 30px 30px}
    #imageWrapper img{width:100%;height:100%;}
</style>

```

This works fine for landscape pictures, but portrait-format images are scaling to the image-width and not to browser height. Instead I get an unwanted scrollbar and an image that needs scrolling. height:100% seems not to be working correctly in my case

I work in ASP.NET with C# in a ContentPlaceholder in my Masterpage. The imageUrl is filled in code-behind. So background images are not possible without dirty tricks.

What I hope to reach is that landscape pictures fill 100% viewport width and max viewport height, but portrait images fill 100% viewport height and max viewport width.