图片无法与同一行中的其他元素适配。
如果是相同的图片,则可以适配。
我已经尝试减少图片的宽度,但似乎没有用。
我必须把图片变小吗?
问题截图- 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;
}
我希望有人能展示如何使图片适应