CODEWITHSUNDEEP
javascripthtmlcss
JensB
JensB

Reputation: 6880

Display image at 100% width or as big as fits in browser

How would I display an image so that its width is the original image width or 100% of the browser width, whichever is smaller (I want to show as much of the image as possible without horizontal scrolling).

Is this possible with CSS, or do I need to play around with javascript?

Upvotes: 1

Views: 129

Answers (1)

MrMAG
MrMAG

Reputation: 1264

Try this: jsFiddle.net Demo

html: 

<img src="http://gypsypixiepirate.com/wp-content/uploads/2013/03/Rumpus-party.jpg" class="className" />

css: 

.className {
    max-width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
}

Upvotes: 2

Related Questions