Resize Image with Viewport

May 17, 2024

I have an image contained in some divs. The image initially, on a widescreen monitor, sits in the central 50% of the viewport. When the browser window is shrunk down to the size of the image I then want the image to shrink with the viewport.

At the moment when the viewport reaches the image, the image just overflows outside the viewport view.

div {
  font-size: 15px;
  color: #444;
  font-family: sans-serif;
  padding: 0px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.container2 {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: auto;
  width: 1000px;
}

.container>div {
  background-color: #d3d3d3;
  width: 500px;
  padding: 10px;
}

.divbox2 {
  text-align: left;
  width: 1000px;
  height: 20px;
}

.divbox3 {
  background-color: #9bad65;
  text-align: center;
  width: 1000px;
}

<div class="container2">

  <div class="divbox2"></div>

  <div class="container">
    <div>Game:</div>
    <div>User:</div>
  </div>

  <div class="divbox2">Big Lego is a feature of this game.</div>
  <div class="divbox3">
    <img src="tillyimages/images/Terracotta Lego.jpg" loading="lazy" style="max-width: 100%">
  </div>

</div>

Here is the image in question

Image

>Solution :

You just need to simplify things a bit.

div {
  font-size: 15px;
  color: #444;
  font-family: sans-serif;
  padding: 0px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.container2 {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: auto;
  max-width: 1000px;
}

.container>div {
  background-color: #d3d3d3;
  width: 500px;
  padding: 10px;
}

.divbox2 {
  text-align: left;
  width: 100%;
  height: 20px;
}

.divbox3 {
  background-color: #9bad65;
  text-align: center;
  width: 100%;
}

<div class="container2">

  <div class="divbox2"></div>

  <div class="container">
    <div>Game:</div>
    <div>User:</div>
  </div>

  <div class="divbox2">Big Lego is a feature of this game.</div>
  <div class="divbox3">
    <img src="https://www.bb2002.com/tillyimages/images/Terracotta%20Lego.jpg" loading="lazy" style="max-width: 100%">
  </div>

</div>