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

With your original code (`width=700px`), what specifically was wrong with how it looked? — showdev, Jan 11 '18 at 21:12
re: what was wrong with original code - for example there was one row with 3 images. On some computers, one of the images would get bumped to the next row. So I changed the width to (say) 33% 33% 33%. This worked, and now all 3 images are on the same row. But I don't want the images to shrink when the browser window is resized. — user1551817, Jan 11 '18 at 21:19
Link to the site: http://commercialwaterheating.com/testing/ — user1551817, Jan 11 '18 at 21:21
I see. How would you like it to function? Do you want the images to fit the browser width upon load, but then not adjust when the browser size changes? I'd say it's common functionality for [images to resize](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container) when browser size changes. However, you may want to investigate other methods for [responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). — showdev, Jan 11 '18 at 21:53
I guess I just want to do what's usual. But I'm thinking about my logo for example. When I resize the window, the logo gets small but the text stays the same size. I'm just looking at YouTube for example and that logo never changes its size. — user1551817, Jan 11 '18 at 21:57
I suggest resizing the logo image to around 400 or 500 pixels wide. Right now its 2046px, which may be unnecessarily large. Then remove `width:37%` and set `min-width:100%` instead, so that it only shrinks when it doesn't fit inside its container. But that's just my suggestion and it depends on your design and how you want it to work. YouTube's logo is designed at a small enough size to fit in most browser sizes without shrinking, although it disappears completely at smaller browser widths. — showdev, Jan 11 '18 at 22:36
You might also want to consider using the [meta viewport tag](https://stackoverflow.com/questions/14304494/responsive-web-design-is-working-on-desktop-but-not-on-mobile-device). — showdev, Jan 11 '18 at 22:39

score 1 · Answer 1 · answered Jan 11 '18 at 21:19

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>

score 1 · Answer 2 · edited Jan 11 '18 at 22:40

1

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.

edited Jan 11 '18 at 22:40

VXp

11,598
6
31
46

answered Jan 11 '18 at 21:21

Hack5

3,244
17
37

score 0 · Answer 3 · answered Jan 11 '18 at 22:57

0

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

.logo_container img {
    width: 200px;
}

answered Jan 11 '18 at 22:57

Mr. Hugo

11,887
3
42
60

user1551817 already said, he/she tried this and didn't like it, because depending on the pixel density, it will be a different size. – Hack5 Jan 12 '18 at 14:58
No that is not what he/she said. User1551817 only mentions screen resolution. – Mr. Hugo Jan 12 '18 at 15:09
PS. Render size and screen size (in pixels) are two different things and not related 1 on 1. CSS defines render size, so a retina display will actually show an image of 400 pixels wide when you define `width: 200px`. – Mr. Hugo Jan 12 '18 at 15:11
PPS. That is also the reason you have to use double resolution images for retina displays. If you do not, you will end up with blurry images, because one image pixel will then cover 4 actual (screen) pixels. – Mr. Hugo Jan 12 '18 at 15:14

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

3 Answers3