How to resize image according from screen resolution on html css

Question

I want to change an image so that its size is according to the screen resolution, for example 1920x1080 to 1600x900, using HTML and CSS.

How can I do it?

Answer 1

HTML :

<div class="img-div">
<img src="path-to-image">
</div>

CSS :

.img-div { height:100%; width:100%;}
img { max-width:100% }

Answer 2

You can use @media rule or set size of image in percents.

Answer 3

use media Query. This will only works with relevant Screen resolution

@media only screen and (min-width: 1490px)
{
}
@media only screen and (max-width: 1490px) and (min-width: 1366px)
{
}
@media only screen and (max-width: 1366px) and (min-width: 1280px) 
{
}
@media only screen and (max-width: 1280px) and (min-width: 1024px) 
{
}
@media only screen and (max-width: 1024px) and (min-width: 768px) 
{
}

Answer 4

HTML

<img src="path of the image" alt="any message you want to type">

CSS

img {width: 15%; height: any numberpx;}

// make sure that you give the width of the image in terms of percentage that will adjust your image according to the size of the screen height you can give as per your need .