连续响应的css图像答案

【问题标题】：css images in a row responsive连续响应的css图像
【发布时间】：2019-01-21 05:39:58
【问题描述】：

我正在显示最大值。连续 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>

问候

【问题讨论】：

Responsive Web Design Basics
使用媒体查询 - responsivedesign.is/develop/browser-feature-support/…
了解媒体查询，谢谢。

标签： css image responsive

【解决方案1】：

您可以使用 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 Tricks: A complete guide to Flexbox

【讨论】：

【解决方案2】：

正如上面 Tim Gerhard 所建议的，您需要检查媒体查询。您也可以尝试以下方法。

使用 Css 设置图像的大小，您在 html 文件中指定的大小会覆盖 css 选项，因此媒体查询甚至可能不起作用。
在 css 中，您可以为较小的显示器设置图像的宽度为 100%，为较大的显示器设置实际尺寸。

我认为这些应该可行。

【讨论】：

应该是这样，html文件中设置的大小忽略了css媒体查询，谢谢！

【解决方案3】：

您正在寻找的是 css 媒体查询

用这么简单的语句：

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

你可以强制body为蓝色（如果屏幕宽度大于992px）。

来源：https://www.w3schools.com/css/css3_mediaqueries_ex.asp

【讨论】：