How to scale the image with css

Question

I have 3 images and how to scale this images than I reduce the size of the browser. How to make images smaller whan make my browser smaller? I try this but it does not work:

HTML

   <div class="main">
      <div class="submain">
        <div class="iner">
          <img src="img/sample1.png" alt="" />
        </div>
        <div class="iner1">
          <img src="img/sample2.png" alt="" />
        </div>
        <div class="iner2">
          <img src="img/sample3.png" alt="" />
        </div>
      </div>
    </div>

CSS

.main{
  position:relative;
  height: 500px;
  width: 1000px;
  background-color: #111210;
}


.iner img{
  position: absolute;
  width: 600px;
  height: 350px;
  background-color: #34cb2f;
  bottom: 0;

  left:50%;
  z-index: 5;
  transform: translateX(-50%); -webkit-transform: translateX(-50%);
}

.iner1 img{
  position: absolute;
  width: 600px;
  height: 270px;
  background-color: #34cb2f;
  bottom: 0;

  right: 5%;
  transform: translateX(-50%); -webkit-transform: translateX(-50%);
}

.iner2 img{
  position: absolute;
  width: 600px;
  height: 270px;
  background-color: #34cb2f;
  bottom: 0;

  left: 65%;
  transform: translateX(-50%); -webkit-transform: translateX(-50%);
}

.submain{
  width: 800px;
  height: 200px;
  background-color: rgba(38, 118, 212, 0.51);
}

And this is for scale image when min-width less than 400px:

@media screen and (min-width: 400px) {
  .submain{
    width: 75%;
  }
}

But this media rule does not work, maybe I doing something wrong, please help me to understand. Thank you!

`min-width` means the minimum width that the query takes effect, i.e. greater than a certain width. For less than 400px, you want `max-width`, which takes effect at values below a maximum width value. — Maximillian Laumeister, Apr 23 '16 at 21:06

score 1 · Answer 1 · edited May 23 '17 at 11:45

1

If you want to scale image when width less than 400px, then you need to change @media screen and (min-width: 400px) to @media screen and (max-width: 399px)

TIP: One way to have your image scale is to set the img max-width: 100%. Then if the div surrounding the image gets smaller or larger when the browser width is resized, the image will scale with it.

Here is a similar post that may help you: Make an image responsive - simplest way

edited May 23 '17 at 11:45

Community

1
1

answered Apr 23 '16 at 21:03

Jim Frenette

1,599
10
12

he could also specify the width in vw instead of px – Rasik Apr 23 '16 at 21:06
in HTML all images placed in div block but then I apply media rule for this block it does not work – Nevada Apr 23 '16 at 21:07

score 0 · Accepted Answer · answered Apr 23 '16 at 21:01

0

The media query should work (I ghess), but as the imgs have fixed width, they're just overflowing.

You should use percentual width for the imgs as well. Remember that if you set the width or the height, the other dimension will scale proportionally.

answered Apr 23 '16 at 21:01

Gabriel

2,170
1
17
20

no, it does not work, maybe because I use `position` ? Could this be the reason? – Nevada Apr 23 '16 at 21:11
.submain should have position:relative in order to the absolute children to position relavite to it. – Gabriel Apr 23 '16 at 21:14
Thank you, your coment helps me! – Nevada Apr 23 '16 at 21:28

Christoph · Answer 3 · 2016-04-23T21:16:13.933

The 'correct' solution depends heavily of the context of your website. You can take several approaches to achieve it.

One would be, to just give your images relative dimensions (%, em, or one of the new units like rem, vh,... ). This automatically scales them according to the size of the surrounding element (and thus the browser).

Also, unless your layout really requires it, I often only define one dimension (either width OR height). This way the browser automatically takes care of preserving the aspect ratio of your images.

score 0 · Answer 4 · answered Apr 23 '16 at 22:27

0

Apply your image to the div class as a background and use background-size to scale accordingly.

answered Apr 23 '16 at 22:27

fauverism

1,970
3
33
59

score 0 · Answer 5 · answered Apr 23 '16 at 22:48

vh, whether being placed on the image itself or on the containing element, will scale the image depending on the height of their viewport.

It won't work with width quite the same, though, if at all. Your image will scale relatively well, but it'll struggle with niches, although I do admit they're very rare.

% will scale the image based on the relative percentage of the container, whether that be the body of your page or a respective div -- in your case, that of .iner. The problem with this is that that then relates to the percentage that .iner inherits from .submain and the same for .submain's percentage of .main. Parenting and percentages are never the greatest pair.

(Blue is %, Black is vh)

How to scale the image with css

5 Answers5