I don't want images to resize when I resize the browser

I have some images on my webpage. I originally put their sizes in pixels, e.g.:

<IMG src="image.png" width=700px height=100px>

When I used different machines with different screen resolutions, sometimes the page didn't look like I wanted it to.

I then switched to set the dimensions using percentages rather than pixels, e.g.:

<div class="logo_container">
  <IMG src="image.png">
</div>

and

.logo_container img {
    padding: 15px;
    width: 37%;
    position: relative;
}

The page now looks how I want it, but if I start to resize my browser window, the images shrink (whilst maintaining aspect ratio). I don't want this to happen.

I want the web page to look correct when the browser is full screen, but then I don't want images to shrink.

Thank you.

3 answers

  • answered 2018-01-11 21:07 Tanyade

    You should change the css based on the screen width:

    <div class="logo_container">
      <IMG src="image.png">
    </div>
    <style>
    @media screen and (max-width: 540px) {
        .logo_container img {
            padding: 15px;
            width: 100%;
            position: relative;
        }
    }
    @media screen and (min-width: 540px) and (max-width: 780px) {
        .logo_container img {
            padding: 15px;
            width: 50%;
            position: relative;
        }
    }
    @media screen and (min-width: 780px) {
        .logo_container img {
            padding: 15px;
            width: 30%;
            position: relative;
        }
    }
    </style>
    

  • answered 2018-01-11 21:07 Penn

    Use em.

    <img src="" alt="">
    

    CSS:

    .logo_container img {
        width: 1em;
    }
    

    em is constant between all devices - it is always the same size in real life: see https://www.w3schools.com/cssref/css_units.asp for more info.

  • answered 2018-01-11 21:07 JoostS

    Just set the width of the image to a fixed amount of pixels:

    .logo_container img {
        width: 200px;
    }