根据背景图像中心的屏幕尺寸水平/垂直组织图像答案

【问题标题】：Organize images horizontally/vertically according screen size in center over background image根据背景图像中心的屏幕尺寸水平/垂直组织图像
【发布时间】：2020-08-13 01:04:31
【问题描述】：

在<body><section>我有背景图片：

<img src="img/background.png" class="back-img">

css:

.back-img {
  width: 100%;
  height: auto;
  overflow:hidden;
}

像这样：

<section> 
    <div id="topLine">
        <img src="img/background.png" class="back-img">                                      
    </div> 
</section>

我正在尝试使用position: fixed; 将浏览器窗口中相同大小的不同单独方形图像水平对齐在浏览器窗口中的背景图像的中心，以使其保持在屏幕中心并在移动屏幕上垂直滚动和组织：

   <img src="img/square1.png" class="image">
   <img src="img/square2.png" class="image">
   <img src="img/square3.png" class="image">

.css：

.image {
  position: fixed;
  width: 69px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

归档这样的内容：

背景颜色表示背景图片和白色方块是相同大小的图片。

我试过这个example：

<div class="row">
  <div class="column">
    <img src="img/square1.png">
  </div>
  <div class="column">
    <img src="img/square1.png">
  </div>
  <div class="column">
    <img src="img/square1.png">
  </div>
</div>

与：

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

在我的情况下，它没有按要求组织图像，应该将图片对齐在一行，但使用position: fixed;，我的屏幕上只有一张图像。

我正在尝试找到一些正确的方法来获得结果，也许使用<table>、<tr>、<td> 根据屏幕尺寸从水平到垂直组线自动组织不同的图像，浏览器窗口手动缩小.

首先，我必须在固定位置的背景图像中心的水平线上重复相同的图像：

任何指南或示例都会有所帮助

【问题讨论】：

标签： html css

【解决方案1】：

CSS 网格或 flex 将是理想的选择（假设是现代浏览器）。

我不清楚为什么你的背景图片需要 img 元素，但我过去有很多理由，所以这需要一些额外的东西才能使用 img 元素。

这是我对您正在寻找的内容的解释的最基本示例：https://codepen.io/Ilkai/pen/abNdZQK

基本上：

使用background-image 设置您的section，并将其用作容器大小的来源（使用100 vw/vh 全屏）

<section class="bg">
  ...
</section>

.bg {
  background-image: url('...');
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

使用display: flex/grid 创建一个专门用作布局父级的 div（Flexbox 比 Grid 稍旧，因此它有更好的支持）。使用align-items 和justify-content 为孩子们提供中心。

<section class="bg">
  <div class="layout">
    ...
  </div>
</section>

.bg { ... }

.layout {
  width: inherit;
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

您还将媒体查询应用到布局 div。

.bg {...}

.layout {...}

@media (min-width: 720px) {
  .layout {
    flex-direction: row;
  }
}

将您的 img 元素添加为布局 div 的子元素，并相应调整大小。

<section class="bg">
  <div class="layout">
    <img src="..." />
    <img src="..." />
    <img src="..." />
    <img src="..." />
  </div>
</section>

.bg {...}

.layout {...}

@media (...) {}

.layout img {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  margin: 1rem;
}

如果我误解了你的意思，请在 cmets 中告诉我

【讨论】：

您好，对于迟到的重播和错过的点感到抱歉。您已经注意到“我不清楚为什么需要元素”。我必须通过悬停将原始图像颜色淡化为灰色过滤器，无论如何，它与背景图像相同：url

【解决方案2】：

position: fixed 图像可能重叠。

尝试将它们包装在一个固定元素中，并让它们成为该元素中的子元素，然后您可以使用 display: inline block; text-align: center; 或 display: flex; justify-content: center; 来实现您的目标。

我建议使用 flex，因为您可以很容易地为您的移动 CSS 更改它。

【讨论】：