如何在更改分辨率时使用 css 按特定顺序动态定位图像？

Question

我正在努力学习 css。

我写了这个非常简单的代码，它在 2 行中显示 8 张图片，每行包含 4 张图片。我打算让这个 senario 用于更宽的分辨率。（下图） 4pics X 2rows -> OK

对于较小的分辨率宽度，我只想让 2 张图片排成一行，因此我们有 4 行，每行 2 张图片。（下图） 4pics X 4rows -> OK

我的问题是，当我将分辨率更改为某些像素时，1 张图片移动到下一行，而其他 3 张图片仍然保持一行，我不希望这种情况发生。（下图） (3+1)pics X 2rows -> wrong scenario

我知道我可以通过使用额外的 div 和 @media 标签 display:block/inline 来处理它，但我想知道我怎样才能设法用 css 来处理它而不是添加任何html?

的其他元素

body {}

.container {
  background-color: yellow;
}

.header {
  background-color: yellow;
  height: 14vh;
}

.body-content {
  text-align: center;
  background-color: green;
}

.image-section img {
  width: 200px;
  height: 200px;
  margin: 3px;
}

<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="container">
  <div class="header">header</div>
  <div class="body-content">
    <div class="image-section">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
    <div class="image-section">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
  </div>
</div>

Answer 1

一个媒体查询就足够了：

想法：

@media (max-width:868px) {
  .body-content .image-section {
    max-width: 600px;
    margin: auto;
  }
}

body {}

.container {
  background-color: yellow;
}

.header {
  background-color: yellow;
  height: 14vh;
}

.body-content {
  text-align: center;
  background-color: green;
}

.image-section img {
  width: 200px;
  height: 200px;
  margin: 3px;
}

<div class="container">
  <div class="header">header</div>
  <div class="body-content">
    <div class="image-section">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
    <div class="image-section">

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />

      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
  </div>
</div>

Answer 2

您可以使用 div 像这样包装每个 img

body {}

.container {
  background-color: yellow;
}

.header {
  background-color: yellow;
  height: 14vh;
}

.body-content {
  text-align: center;
  background-color: green;
  display: flex;
  flex-wrap: wrap;
}

.image-wrapper {
  flex: 0 0 25%;
}

.image-wrapper img {
  max-width: 200px;
  max-height: 200px;
}

@media(max-width:600px) {
  .image-wrapper {
    flex: 0 0 50%;
  }
}

<div class="container">
  <div class="header">header</div>
  <div class="body-content">
    <div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
    </div>
    <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
    <div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
    </div>
    <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
    <div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
    </div>
    <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
    <div class="image-wrapper">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRoOD-0XtKzjUAhidwtJKrcm9pm0VpNSETZ9g&usqp=CAU" />
    </div>
    <div class="image-wrapper">
      <img src="https://d2skuhm0vrry40.cloudfront.net/2020/articles/2020-10-16-11-04/-1602842658520.jpg/EG11/thumbnail/750x422/format/jpg/quality/60" />
    </div>
  </div>
</div>

Here is fiddle

或者您可以使用 displayinlineblock 来确保 img

Fiddle second approach

如何在更改分辨率时使用 css 按特定顺序动态定位图像？

How to position image dynamically in a specific order using css while changing the resolution?

html

css

position

image

line-breaks