图像与其他图像相比的响应尺寸

我需要将三张图像居中放在一张桌子中，然后将另外两张图像放在另一张桌子的中间。我该怎么做？图像与其他图像相比的响应尺寸

我设法获得这一结果缩放70％的第一台和比例46.67％，第二个表，这是我想要的东西：

但后来我有移动版本的问题，其中第四个和第五个图像显得更小：

我该怎么做才能解决这个问题？

这是代码：

.half-txt { 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
    line-height: 25px; 
 
    color: #7e7e7e; 
 
} 
 

 
.text-uppercase { 
 
    text-transform: uppercase; 
 
} 
 

 
.team-member, 
 
.team-member .team-img { 
 
    position: relative; 
 
} 
 

 
.team-member { 
 
    overflow: hidden; 
 
} 
 

 
.team-member, 
 
.team-member .team-img { 
 
    position: relative; 
 
} 
 

 
.team-hover { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    border: 20px solid rgba(0, 0, 0, 0.1); 
 
    background-color: rgba(255, 255, 255, 0.90); 
 
    opacity: 0; 
 
    -webkit-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
} 
 

 
.team-member:hover .team-hover .desk { 
 
    top: 35%; 
 
} 
 

 
.team-member:hover .team-hover, 
 
.team-member:hover .team-hover .desk, 
 
.team-member:hover .team-hover .s-link { 
 
    opacity: 1; 
 
} 
 

 
.team-hover .desk { 
 
    position: absolute; 
 
    top: 0%; 
 
    width: 100%; 
 
    opacity: 0; 
 
    -webkit-transform: translateY(-55%); 
 
    transform: translateY(-55%); 
 
    -webkit-transition: all 0.3s 0.2s; 
 
    transition: all 0.3s 0.2s; 
 
    padding: 0 20px; 
 
} 
 

 
.desk, 
 
.desk h4, 
 
.team-hover .s-link a { 
 
    text-align: center; 
 
    color: #222; 
 
} 
 

 
.team-member:hover .team-hover .s-link { 
 
    bottom: 10%; 
 
} 
 

 
.team-member:hover .team-hover, 
 
.team-member:hover .team-hover .desk, 
 
.team-member:hover .team-hover .s-link { 
 
    opacity: 1; 
 
} 
 

 
.team-hover .s-link { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    opacity: 0; 
 
    text-align: center; 
 
    -webkit-transform: translateY(45%); 
 
    transform: translateY(45%); 
 
    -webkit-transition: all 0.3s 0.2s; 
 
    transition: all 0.3s 0.2s; 
 
    font-size: 35px; 
 
} 
 

 
.desk, 
 
.desk h4, 
 
.team-hover .s-link a { 
 
    text-align: center; 
 
    color: #222; 
 
} 
 

 
.team-member .s-link a { 
 
    margin: 0 10px; 
 
    color: #333; 
 
    font-size: 16px; 
 
} 
 

 
.team-title { 
 
    position: static; 
 
    padding: 20px 0; 
 
    display: inline-block; 
 
    letter-spacing: 2px; 
 
    width: 100%; 
 
} 
 

 
.team-title h5 { 
 
    margin-bottom: 0px; 
 
    display: block; 
 
    text-transform: uppercase; 
 
} 
 

 
.team-title span { 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    color: #a5a5a5; 
 
    letter-spacing: 1px; 
 
} 
 

 
table.team_table { 
 
    width: 70%; 
 
    table-layout: fixed; 
 
    border-spacing: 15px; 
 
    border-collapse: separate; 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
} 
 

 
td.team_td { 
 
    padding: 6px 10px 10px 6px; 
 
    border: 0px; 
 
    text-align: left; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="text-center"> 
 
     <h2>IL NOSTRO STAFF</h2> 
 
     <div class="separator_auto"></div> 
 
    </div> 
 
    <br><br><br> 
 
    <center> 
 
     <table class="team" cellpadding="3" cellspacing="3" style="width: 70%"> 
 
     <tr class="table_text_tr"> 
 
      <td class="table_text_td"> 
 
      <div class="team-member"> 
 
       <div class="team-img"> 
 
       <img src="https://image.freepik.com/free-photo/man-standing-with-a-black-t-shirt_1187-1045.jpg" alt="team member" class="img-responsive"> 
 
       </div> 
 
       <div class="team-hover"> 
 
       <div class="desk"> 
 
        <br><br> 
 
        <button type="submit" class="btn btn-primary">Contattami</button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="team-title"> 
 
       <h5>Giacomo Varini</h5> 
 
       <span>Founder</span> 
 
      </div> 
 
      </td> 
 
      <td class="table_text_td"> 
 
      <div class="team-member"> 
 
       <div class="team-img"> 
 
       <img src="https://image.freepik.com/free-photo/man-standing-with-a-black-t-shirt_1187-1045.jpg" alt="team member" class="img-responsive"> 
 
       </div> 
 
       <div class="team-hover"> 
 
       <div class="desk"> 
 
        <br><br> 
 
        <button type="submit" class="btn btn-primary">Contattami</button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="team-title"> 
 
       <h5>Giorgio Cavallazzi</h5> 
 
       <span>Co-Founder</span> 
 
      </div> 
 
      </td> 
 
      <td class="table_text_td"> 
 
      <div class="team-member"> 
 
       <div class="team-img"> 
 
       <img src="https://image.freepik.com/free-photo/man-standing-with-a-black-t-shirt_1187-1045.jpg" alt="team member" class="img-responsive"> 
 
       </div> 
 
       <div class="team-hover"> 
 
       <div class="desk"> 
 
        <br><br> 
 
        <button type="submit" class="btn btn-primary">Contattami</button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="team-title"> 
 
       <h5>Filippo Varini</h5> 
 
       <span>Marketing Manager</span> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </center> 
 
    <center> 
 
     <table class="team" style="width: 46.67%"> 
 
     <tr class="table_text_td"> 
 
      <td class="table_text_td"> 
 
      <div class="team-member"> 
 
       <div class="team-img"> 
 
       <img src="https://image.freepik.com/free-photo/man-standing-with-a-black-t-shirt_1187-1045.jpg" alt="team member" class="img-responsive"> 
 
       </div> 
 
       <div class="team-hover"> 
 
       <div class="desk"> 
 
        <br><br> 
 
        <button type="submit" class="btn btn-primary">Contattami</button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="team-title"> 
 
       <h5>Pietro Maccagni</h5> 
 
       <span>Developer</span> 
 
      </div> 
 
      </td> 
 
      <td class="table_text_td"> 
 
      <div class="team-member"> 
 
       <div class="team-img"> 
 
       <img src="https://image.freepik.com/free-photo/man-standing-with-a-black-t-shirt_1187-1045.jpg" alt="team member" class="img-responsive"> 
 
       </div> 
 
       <div class="team-hover"> 
 
       <div class="desk"> 
 
        <br><br> 
 
        <button type="submit" class="btn btn-primary">Contattami</button> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="team-title"> 
 
       <h5>Riccardo Nigrelli</h5> 
 
       <span>Developer</span> 
 
      </div> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </center> 
 
    </div> 
 
</div>

来源

2017-08-31 th3g3ntl3man

应该使用表格f或只有表格数据 - 不是布局（看起来像你用它来布局），除非这是一个电子邮件模板。中心标记已弃用，不应使用 – Pete

我并不完全了解问题（预期与实际结果有什么区别）。另外，你可以把你的代码变成[Stack Snippet]（https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/）吗？这会让我们更容易。 – domsson

我会用一个Flexbox的方法与用于100％的宽度的媒体查询：

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
} 
 

 
.item { 
 
    width: 33.3333%; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 

 
.item>img { 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
@media (max-width: 600px) { 
 
    .item { 
 
    width: 100%; 
 
    } 
 
}

<div class="container"> 
 
    <div class="item"><img src="http://via.placeholder.com/350x150"></div> 
 
    <div class="item"><img src="http://via.placeholder.com/350x150"></div> 
 
    <div class="item"><img src="http://via.placeholder.com/350x150"></div> 
 
    <div class="item"><img src="http://via.placeholder.com/350x150"></div> 
 
    <div class="item"><img src="http://via.placeholder.com/350x150"></div> 
 
</div>

来源

2017-08-31 14:18:39 Pete

图像与其他图像相比的响应尺寸

回答

相关问题