How to fit images to different screen resolutions?

Question

I'm doing a certain project for a programming course, and I've got a little problem with HTML, regarding the scale of pictures. Basically, I don't know how to make the pictures fit different screen resolutions with CSS. I've tried with width and height: auto; I've tried setting them to a certain value of px, I've tried with position abs and relative, but I can't seem to make it work...

I'm attaching a picture for better understanding

And the code: (ignore the foreign language)

#wrapper{
  margin: 0;
}

#header, #footer{
  display: flex;
}

#buton1, #buton2{
  width: 25em;
  height: 2.5em;
  float: left;
  margin-left: 0.25em;
  background-color: #89cff0;
  border-radius: 25px;
}

#buton1>a, #buton2>a{
  color: black;
  padding: 25px;
  text-align: center;
  vertical-align: middle;
  line-height: 2.5em;
  text-decoration: none;
}

#butoane{
  display: flex;
  padding: 1em;
  justify-content: space-around;
  text-align: center;
}

#titlu1{
  text-align: center;
}

#titlu2{
  text-align: center;
}

#baraj{
  text-align: center;
}

#text{
  text-align: justify;
  padding-left: 5em;
  padding-right: 5em;
  padding-bottom: 2.5em;
}

#introducere{
  text-align: center;
}

    <head>
    <meta charset="utf-8">
    <style type="text/css">



    </style>
    <title>Lacurile de acumulare</title>
    </head>

    <body id="wrapper">
    <header>
    <div id="header"><img src="Poze/apa reverse.jpg"></div>
    </header>
    <div id="butoane">
        <div id="buton1"><a href="Amenajari.html">Folosinte si amenajari hidroenergetice</a></div>
        <div id="buton2"><a href="Lacurile.html">Lacurile de acumulare</a></div>
    </div>
    <br>
    <div id="main">
        <div id="titlu1"><h1>LACURILE DE ACUMULARE</h1></div>
        <div id="titlu2"><h2>GENERALITATI</h2></div>
        <br>
        <div id="baraj"><img src="Poze/baraj.jpg" border="2px"></div>
        <br>
        <div id="text">
            <h3 id="introducere">INTRODUCERE</h3>
            <p>abc</p>
        </div>
    </div>
<footer id="footer"><img src="Poze/apa.jpg"></footer>

check out [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) — jo3rn, Feb 16 '21 at 14:49
No one picture will exactly fit every type of device because the aspect ratios are different. CSS provides some handy things to get round this. Most notably background-size/object-fit: cover - where the system will cover the given element cropping either at the top/bottom or the sides as necessary and contain - where you will be sure that the whole image will be seen, but there may be blank space at the sides or at the top/bottom depending on its aspect ratio. — A Haworth, Feb 16 '21 at 17:30

score 0 · Answer 1 · answered Feb 16 '21 at 14:51

0

Give the img a max-width of 100% so it will never be larger than its container

#baraj img {
  max-width: 100%;
}

answered Feb 16 '21 at 14:51

Nico Shultz

1,872
1
9
23

the images im actually reffering to are in the header and footer, the "baraj" one is another picture that doesnt have to do with my issue – Mihai Stan Feb 16 '21 at 14:54
well than call that image with `#header img {}` :D – Nico Shultz Feb 16 '21 at 14:57
1

nevermind, i've figured it out, thank you very much! i wrote width="100%" in
and
and it worked! – Mihai Stan Feb 16 '21 at 14:57

score 0 · Answer 2 · answered Feb 16 '21 at 14:55

Try this CSS.

.responsive {
  width: 100%;
  max-width: 100%;
  height: auto;
}

<img src="https://i.picsum.photos/id/848/536/354.jpg?hmac=ON5WKWjXNxJrhQUUhHxB6GPOY0DMCnt8YOXdhbtj6Dg" alt="" class="responsive">

Note: Resize the browser to see the effect.

Working Fiddle

How to fit images to different screen resolutions?

2 Answers2