如何拥有相同大小的 3 张图像，当我切换到移动模式时，3 张图像重叠？答案

【问题标题】：How to have the 3 images of the same size and when I switch to mobile mode the 3 images overlap?如何拥有相同大小的 3 张图像，当我切换到移动模式时，3 张图像重叠？
【发布时间】：2021-02-10 21:03:12
【问题描述】：

我有 3 张桌面格式的图片尺寸不同，我如何获得相同的尺寸？然后在移动格式中，我希望它通过占用整个宽度来重叠。

我尝试使用flex-direction: column，但它不起作用。我的代码使用 flexbox。

.background-color {
    background-color: #f05f40;
}

h2 {
    text-align: center;
    padding-top: 2%;
    margin-top: 0;
}

.row {
    display: flex;
    width: 100%;
    text-align: center;
}

.content {
    justify-content: space-around;
    padding: 0 10px;
}

img {
    height: 200px;
    object-fit: cover;
    object-position: center center;
}

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
    .content {
        flex-direction: column;
    }
}

<div class="background-color">
    <h2 id="projets">Mes Projets</h2>
    <div class="row">
        <div class="column">
            <div class="content">
                <img class="img" src="/assets/img/projectImage/pain.jpg" alt="Bred" style="width: 100%;">
                <h3>My Work</h3>
                <p>Lorem ipsum..</p>
            </div>
        </div>
        <div class="column">
            <div class="content">
                <img class="img" src="/assets/img/projectImage/catmash.jpg" alt="catmash" style="width: 100%;">
                <h3>My Work</h3>
                <p>Lorem ipsum..</p>
            </div>
        </div>
        <div class="column">
            <div class="content">
                <img class="img" src="/assets/img/projectImage/snakgame.jpg" alt="snakegame" style="width: 100%;">
                <h3>My Work</h3>
                <p>Lorem ipsum..</p>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

我建议将您的图片来源更改为由占位符图片网站提供的图片来源，或图片的完整 URL，以便在从此处运行时显示图片。

标签： html css image flexbox

【解决方案1】：

您在.content 中添加了flex-direction: column，而display: flex 中没有display: flex。相反，您需要添加包含所有三个内容的.row

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
    .content {
        flex-direction: column;
    }
}

【讨论】：

【解决方案2】：

看看这个：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>3 Images responsive</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="thumbnail">
          <img src="https://www.w3schools.com/w3images/lights.jpg" alt="Lights" style="width:100%">
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
          <img src="https://www.w3schools.com/w3images/nature.jpg" alt="Nature" style="width:100%">
      </div>
    </div>
    <div class="col-md-4">
      <div class="thumbnail">
          <img src="https://www.w3schools.com/w3images/fjords.jpg" alt="Fjords" style="width:100%">
      </div>
    </div>
  </div>
</div>

</body>
</html>

您可以通过将width 和height 设置为相同的值来实现所有图像的相同大小。我通常只是在 Photoshop 等图像编辑软件中调整所有图像的大小，然后导入它们。节省您在 CSS 中调整大小的工作。

【讨论】：

感谢您的帮助，但我不想使用 boostrap 和 photoshop。