CSS圖像連續響應

Question

即時通訊顯示最大 連續3張圖像，如果您調整瀏覽器窗口的大小，它們會相互堆疊。

現在，例如，如果您調整窗口的大小並且僅顯示一張圖像，如何將圖像的尺寸設置為width：100％;？

例如，我已經在https://www.slickwords.com/上看到了這一點。

我的代碼：

#wrapper {
  margin: 0 auto;
  width: 900px;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

div>div>div {
  display: inline-block;
}

div>div {
  text-align: center;
}

<div id="wrapper">
  <div style="max-width:900px;margin: 0 auto;">
    <div style="width:100%;">


      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>
      <div><img src="img" width="250" height="150"><br>This text goes under the Picture.</div>

    </div>
  </div>

</div>

問候

Answer 1

您正在尋找的是CSS媒體查詢

用這樣簡單的語句：

@media screen and (min-width: 992px) {
  body {
    background-color: blue;
  }
}

您可以強制主體為藍色（如果屏幕寬度大於992px）。

資料來源： https : //www.w3schools.com/css/css3_mediaqueries_ex.asp

Answer 2

您可以使用flexbox的flex-flow屬性並將min-width應用於每個子級來設置“斷點”，而不是使用媒體查詢來手動測量圖像堆疊的點：

 //The JS code here is just for fiddling around and isn't relevant. let input = document.getElementById("setwidth"); input.onchange = e => { document.getElementById("container").style.width = e.target.value+"%"; document.getElementById("widthspan").textContent = e.target.value+"%"; }; 

 #container { display: flex; flex-flow: row wrap; /* This is where the magic happens!*/ align-items: flex-start; align-content: flex-start; justify-content: space-around; border: 2px solid black; } #container>div { flex-basis: 22.5%; /*Try to take up 22.5% of the space, which would be almost a quarter but with a spacing of 2.5% total*/ background: blue; border: 1px solid yellow; height: 100px; min-width: 80px;/* This is also where the magic happens */ } 

 <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <!-- Just for fiddling around: --> <hr> Set container width: <span id="widthspan">100%</span> <input id="setwidth" type="range" min="1" max="100" value="100"/> 

---

其他資源：

• CSS技巧：Flexbox的完整指南

Answer 3

正如Tim Tim Hardhard上面建議的那樣，您需要檢查媒體查詢。 您也可以嘗試以下方法。

1. 使用Css設置圖像的大小，您在html文件中指定的大小會覆蓋css選項，因此媒體查詢甚至無法工作。
2. 在CSS中，您可以將較小的顯示器的圖像寬度設置為100％，將較大的顯示器的實際尺寸設置為100％。

我認為這些應該有效。