htmlcssviewport

Resize Image with Viewport


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>