CODEWITHSUNDEEP
jquerycssimagehtmlfullscreen
user1783933
user1783933

Reputation: 1145

Image in a full screen div that preserve aspect ratio

I try to put a image in a div to be displayed in full screen. I tried in many ways, but i have many problems if the image has more height than width, in those cases, image should be displayed centered and the remaining space with the background color of the container div, I don't want to crop the image

Upvotes: 1

Views: 496

Answers (2)

Vision
Vision

Reputation: 110

Perhaps something like this?

<img src="path" height="100%" />

Upvotes: 0

user1721135
user1721135

Reputation: 7092

Use background-size:contain. This will prevent cropping and maintain the ratio, while still atemting to fill as much space as possible.

To center use background-position:center;

div {
  background-image:url('http://static.tumblr.com/purt4nm/BCJmqjvcj/1367698942181.jpg');
}

http://jsbin.com/enaxif/1/edit

Upvotes: 2

Related Questions