时间戳

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

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

问题描述

我有 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>

标签： htmlcssimageflexbox

解决方案

看看这个：

<!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 中调整大小的工作。

推荐阅读