Search code examples
htmlcssresponsive-designscalefluid

How to make image scale as per browser window?

I want to scale the image as per browser window. I've tried to do it with some changes in CSS, but failed.

.entry div.thumbnail {position: relative; width:100%; max-width: 292px; height: 184px;}

.entry div.thumbnail span.overlay2 { position: absolute; top: 0px; left: 0px; display: block; width: 296px; height: 186px;

The main problem lies in span.overlay2. How can i make it scale as per browser window size?

Solution

  • You have the height set after the width: 100%. This is basically saying, set the width to 100%, then set it to a set height. Therefore you have a static image that will not rescale. Remove the height value and it will work.