图片无法适应行宽

Question

图片无法与同一行中的其他元素适配。

如果是相同的图片，则可以适配。

我已经尝试减少图片的宽度，但似乎没有用。

我必须把图片变小吗？

问题截图- https://istack.dev59.com/3E9zo.webp

HTML

 <section class="section-team" id="team">
    <div class="row">
       <h2>team members</h2>    
    </div>
  <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg"  class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
   <div class="column-4">
    <img src="img/Picture1.jpg" class="members" alt="members" style="width:50%">
    <h3>Adam</h3>
  </div>
    <div class="column-12">
    <img src="img/upm.jpg" class="upm" alt="upm" style="width:20%">
    <h4>In partnership with  Upm</h4>
  </div>       
</section>

Css

.row {
    max-width: 1140px;
    margin: 0 auto;
}

.column-4 {
  float: left;
  box-sizing: border-box; 
  width: 33.3%; 
  display: inline-block;
  padding: 5px;
  padding-right: 30px;
}

.column-12 { 
  float: right; 
  box-sizing: border-box; 
  width: 100%; 
  display: inline-block;
  padding: 5px; 
  padding-right: 30px;
}

.section-team{
    text-align: center;
    clear:both;
}

.members{
    border-radius: 50%;
}

.upm {
  float: right ; 
  padding-top: 2px;

}

我希望有人能展示如何使图片适应

- Tryingprogrammer

---

考虑使用flexbox，我认为可以解决你的问题。 - Sfili_81

所有的图片尺寸（宽度 x 高度）都一样吗？ - nmak18

Answer 1

使用flex可能是您的问题的最佳和最简单的解决方案。您可以通过声明以下内容来实现：

使用flex可能是您的问题的最佳和最简单的解决方案。您可以通过声明以下内容来实现：

display:flex;

在照片容器中，根据当前的HTML代码，section标签必须被添加。而flex会“强制”每一个元素在同一行。因为默认情况下flex-direction属性被设置为row。"Original Answer" 可以翻译成 "最初的回答"。

- Pedro Figueiredo

---

我的意思是，在你的CSS中，你这样写：section{ display:flex } - Pedro Figueiredo

Answer 2

你的布局是一个经典的网格布局，有很多库可以帮助处理这些问题！考虑使用Bootstrap - https://getbootstrap.com/docs/4.0/layout/grid/。如果你仍然想要纯粹使用CSS，我建议使用flexbox - https://internetingishard.com/html-and-css/flexbox/。祝好运！

- Matan Shamia

Answer 3

这是一个经典的网格系统，最好使用Bootstrap来获得完美的网格。使用Bootstrap。

<div class="row">
  <div class="col-4">place your image here</div>
  <div class="col-4">place your image here</div>
  <div class="col-4">place your image here</div>
  <div class="col-4">place your image here</div>
</div>

- Rohan Mohapatra

Answer 4

请检查以下代码部分。

    <div class="column-12">
      <img src="img/upm.jpg" class="upm" alt="upm" style="width:20%">
      <h4>In partnership with  Upm</h4>
    </div> 

'column-12'占据了该行的所有空间。对于所有图像，您都在使用'column-4'。 或者 使用Bootstrap

- Haseeb Mirza

---

你说的是第三行里所有的空间吗？ - Tryingprogrammer

每行最多包含12个单位的大小。列-12、列-6、列-4、列-3是不同的大小，您想在单行中显示吗？单行最大尺寸为12。如果一行包含列-12，则整行将与该列一起。 - Haseeb Mirza