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

Question

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

<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, eg:

<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.

Answer 1

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>

Answer 2

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.

Answer 3

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

.logo_container img {
    width: 200px;
}