How to fit an image to fit the screen
Let's say we have an image that is 2000px wide and 500px high in a css property. For a 1080p monitor, how can I adjust this image correctly. I want this image to be adjusted to any screen size for responsive design.
+3
Saji
source
to share
2 answers
if you want to keep aspect ratio then set width: 100% and height: auto
if you want to cover the whole parent element then height: 100% and width: 100%
+12
Akhilesh Kumar
source
to share
Is this what you want:
img {
width: 100%;
height: auto;
}
If you want your image to scale differently (or add / override some styles for more users) on different devices, you need to use CSS Query Queries. For example.
img {
display: inline-block;
width: 25%; // Show 4 images in a row normally
height: auto;
}
@media (max-width: 600px) {
img {
width: 100%; // Override width to show only one image in a row on smaller screens
}
}
Mozilla Documentation on CSS Media Queries
W3Schools Tutorial on Queries in CSS Format
+8
Dilip Raj Baral
source
to share