CODEWITHSUNDEEP
htmlcss
Blaze
Blaze

Reputation: 2329

CSS: Image width to resize and fit the browser width dynamically

I have made a code to resize and set the width of an image to that of the browser dynamically, so I have set the following code in css

max-width: 100%; 
  height: auto;

My challenge is that the image never resizes dynamically to occupy the entire screen width of the browser dynamically. Here is a Plnker I have made http://plnkr.co/edit/j6JBCaKBmVQV1PDAh3dZ?p=preview What could be wrong.

Upvotes: 1

Views: 3532

Answers (4)

Rahul_Y13
Rahul_Y13

Reputation: 109

Use the property for img.

CSS: 

img {
    width: 100%;
    height: auto;
}

or max-width:100%; it will automatic become resizeable.

Upvotes: 0

AlexG
AlexG

Reputation: 5919

To squeze it if the parent becomes too small:

display: block;
max-width: 100%; 
height: auto;

To force it taking up the whole with:

display: block;
width: 100%; 
height: auto;

Upvotes: 1

Naji Aboo
Naji Aboo

Reputation: 11

change max-width: 100%; to width :100%

Upvotes: -2

Roope
Roope

Reputation: 4507

Change max-width to width.

As should be obvious from the naming, max-width only acts as an upper limit. It does not make anything bigger, it merely downsizes things if they already are bigger than what you specify there.

Sample: http://jsfiddle.net/b18axhzg/

HTML:

<img src="http://lorempixel.com/400/200/" alt="">

CSS:

img {
    width: 100%;
    height: auto;
}

Upvotes: 4

Related Questions