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?
-
possible duplicate of Responsive design and image sizesalexroussos– alexroussos2015-06-16 04:20:38 +00:00Commented Jun 16, 2015 at 4:20
Add a comment
|
4 Answers
HTML :
<div class="img-div">
<img src="path-to-image">
</div>
CSS :
.img-div { height:100%; width:100%;}
img { max-width:100% }
Comments
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)
{
}
Comments
You can use @media rule or set size of image in percents.
1 Comment
Kimberly
I have been using media queries for my webpage to make it responsive. For my image, I have added in img-responsive and it scale according when I shift my window from left to right. Do I media (min-width 1600){ .img { width: ...px; height: ...px; } }
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 .
