Prevent image from resizing when window starts resizing

Question

I have an image tag that I managed to align nicely to the rest of the divs in one section. However, as I resize the window, the image starts shrinking or expanding. What could I do in CSS to prevent this from happening?

 .img-test {
     width: 33.87%; 
     position: absolute;
     max-width: none;
   } 

 .clothes {
    background-color: #d04925;
    float: right;
    height: 805px;
  }

The image and the div with the .clothes class are one next to the other and it should stay that way.

Can u plz send the html code? – Manikandan2811 Aug 13 '19 at 13:32 — Manikandan2811, Aug 13 '19 at 13:32

Duck_dragon · Answer 1 · 2019-08-13T16:27:39.507

0

You need height attribute to be set to some value to prevent image from resizing. Example

.img-test{
         height: 200px;
         position: absolute;
         min-width: 300px;
         width: 33.87%; 
         }

This will help. Unless the image is inside a div whose height is changing.

edited Aug 13 '19 at 16:27

answered Aug 13 '19 at 13:36

Duck_dragon

440
5
17

1

This would just set a fixed height, the width is still dynamic so this would actually make it even worse. Look at this: https://jsfiddle.net/0qh1z5ov/ – Matthias Seifert Aug 13 '19 at 13:44
@MatthiasSeifert you are correct. Just realized that – Duck_dragon Aug 13 '19 at 16:26

score 0 · Answer 2 · answered Aug 13 '19 at 13:39

0

You can use the max-width, min-width, max-height, min-height attributes to prevent the image from resizing. Here's a link with more information. w3schools

answered Aug 13 '19 at 13:39

amanhasnoname

236
1
4
16

score 0 · Answer 3 · answered Aug 13 '19 at 13:54

Hello and welcome to StackOverflow!

You set your image to a percentage value, or in other words to a fraction of the parent container. So if the parent container shrinks, the fraction of it gets smaller and the image shrinks, too! Now there are ways to prevent this, you could set a min-width, which defines a minimum width for your image. So it will shrink to this width, but it won't shrink below.

.img-test {
  width: 33.87%;
  min-width: 300px;
}

In this example, your image would never be smaller than 300px. You could also omit the min-width Attribute, and set a fixed width directly. But since you mentioned, that you managed to make it „look nicely“, this will propably wreck your whole UI, if the viewport of the browser is too small.

So I would recommend to consider rethinking your layout, if it only works with some specific widths. One way to do this are media queries. You define breakpoints in your CSS, and if the viewport gets smaller (or bigger), different CSS rules apply. You can read more about this here and here.

Just a small off-topic addition: The default value of max-width is none and it is not inherited, so there is no reason to set it to this value.

Prevent image from resizing when window starts resizing

3 Answers3