CODEWITHSUNDEEP
htmlcssresponsive
Harish
Harish

Reputation: 1273

Image should be responsive and should be filled on the entire screen

I have 2 div's named first and second and I have set the width and height of them as 100%

.first{
     width : 100%;
    height : 100%;
}
.second{
     width : 100%;
    height : 100%;
}

now I would like to add an image in each div. These images should fill in the entire div. 

<img src="someimage.png" width="100%" height="100%"/>

My problem is the image should not be stretched it should be filled the entire screen. I have used img img-responsive classes to achieve this. The image is now getting filled without stretching but when resized it is getting resized uniformly and the height of it is also getting decreased hence the image's height is now not getting filled 100%. Is there any way to achieve width and height of an image to cover the entire screen without stretching and decreasing the height?

Upvotes: 2

Views: 55

Answers (2)

Max Swinkels
Max Swinkels

Reputation: 44

I use imgLiquid this is a jQuery Plugin to resize images to fit in a container.

https://github.com/karacas/imgLiquid

It's super easy to use and light weight.

Upvotes: 0

Pedram
Pedram

Reputation: 16575

Check this out, and you should use width: 100% beside min-height: 100% but i recommend you to use background-image with background-size: cover

.first{
     width : 100%;
    height : 100%;
}

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.first img {
    width: 100%;
    min-height: 100%;
}

<div class="first">
<img alt="" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97500&w=500&h=500"/>
</div>

jsFiddle

Upvotes: 1

Related Questions