Clever Geek Handbook

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


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


source


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


source






More articles:


All Articles