使用视口调整图像大小

Question

我的一些 div 中包含图像。图像最初在宽屏显示器上位于视口中央 50% 的位置。当浏览器窗口缩小到图像的大小时，我希望图像随视口一起缩小。

当视口到达图像的那一刻，图像刚好溢出到视口视图之外。

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>

这是有问题的图片

图片

Answer 1

你只需要稍微简化一下事情。

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>