Images doesn't resize when container div resize below content total width using CSS only

Question

Using only CSS how can I resize images below its original width and height when parent div gets smaller then sum of content width. I have a div with some images and if I resize the window lets say below 400px then images doesn't resize below its original size. Is there any way content images can be auto rezie while resizing browser window. I attached snipped code below:

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  max-height: 256px;
  border: thin solid silver;
}

img {
  height: 100%;
  max-height: 256px;
  width: auto;
}

body {
  margin: 5px;
}

<body>
  <div class="container">
    <img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
    <img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
    <img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
  </div>
</body>

Last post got an error, I deleted it and posted correct one. — Marcin Kostrzewa, Mar 28 '21 at 07:36

score 1 · Answer 1 · answered Mar 28 '21 at 07:48

You can use units like vw which stands for viewport width. So let's say we set img width to 33.33vw then the img will be the 33.33% of the screen size.

body {
  margin: 5px;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  max-height: 256px;
  border: thin solid silver;
}

img {
  height: 100%;
  width: 33.33vw;
}

<div class="container">
  <img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
  <img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
  <img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" />
</div>

Just found a solution. I am posting it. Thank you for help and advice Manas. — Marcin Kostrzewa, Mar 28 '21 at 07:51

score 0 · Answer 2 · edited Mar 28 '21 at 07:57

I found a solution. Just put all images into div and only set image width to 100%. Hope it might be helpful for someone. Snipped code below:

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  max-width: 900px;
  max-height: 256px;
  border: thin solid silver;
}

img {
  width: 100%;
}

body {
  margin: 5px;
}

<body>
  <div class="container">
    <div><img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" /></div>
    <div><img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" /></div>
    <div><img src="https://img.icons8.com/pastel-glyph/2x/blood-sample.png" /></div>
  </div>
</body>

Images doesn't resize when container div resize below content total width using CSS only

2 Answers2