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

时间：2017-08-31 14:04:25

标签： html css image

我需要将三张图像放在一张桌子中，然后将另外两张图像放在下面的另一张桌子中。 我怎么能这样做？

我设法获得这个结果，第一个表缩小70％，第二个表按比例缩小46.67％，这就是我想要的：

enter image description here

但是我的移动版本存在问题，其中第四和第五张图像显得更小：

enter image description here 我该怎么做才能解决这个问题？

这是代码：

.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>

1 个答案:

答案 0 :(得分：2)

我会使用带有100％宽度的媒体查询的flexbox方法：

＆＃13;
＆＃13; 
.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%;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题