CODEWITHSUNDEEP
css
kmg92
kmg92

Reputation: 31

How to resize an image on a website using css

I have an image which is 1400px by 660px and would like it to cover the full width and height of the browser's window without it having to scroll beyond the viewport. How can i achieve this using css to control the dimensions?

Upvotes: 0

Views: 42

Answers (2)

Felix A J
Felix A J

Reputation: 6470

body{
margin: 0;
}
img{
min-width: 100vw;
min-height: 100vh;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<img src="http://lorempixel.com/1400/660/nature/" alt="">

Upvotes: 2

Yotam Omer
Yotam Omer

Reputation: 15356

Try something like this:

#myImg{
    position:fixed;
    top:0; left:0; right:0; bottom:0;
}

with HTML:

<img id="myImg".... >

This will "stretch" the image to fit the screen.. If you would like to keep the proportions of the image I would recommend replacing it with a div with the image as background-image and background-size set to cover.

Upvotes: 0

Related Questions