使用表格的单元格大小缩放按钮内的图像 - 引导程序答案

【问题标题】：scale image inside button with cell size of table - bootstrap使用表格的单元格大小缩放按钮内的图像 - 引导程序
【发布时间】：2022-01-28 02:38:11
【问题描述】：

我想要表格中的一排按钮，每个按钮都由一张图片表示，并且按钮带有透明边框/背景。

我使用 <td class="col-sm-1"> 将每个按钮放在表格的剩余 10 个单元格之一中，并尝试制作 imgs cover - 但边框与上一行中图像的边框不对齐：

button.transparent {
  background: transparent;
  border: none !important;
}

.gborder {
  border: 4px solid green;
  /* outline: 2px solid white; */
}

.selectedTD {
  background-color: grey !important;
  border-bottom: 2pt solid grey;
}

span.smallText {
  color: white;
  font-size: 70%;
}

.imgButton {
  cursor: pointer;
  background-size: cover;
/* background-size: contain; */
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-height: 48px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table class="table table-striped table-hover caption-top">
    <tbody id="table">
        <tr>
            <td class="col-sm-2">
                <h5 class="text-start">click for details:</h5>
            </td>
            <td class="col-sm-1 ">   
                <button class="transparent" disabled>
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                </button>   
            </td>
            <td class="col-sm-1">   
                <button class="transparent" disabled>
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                </button>   
            </td>            
            <td class="col-sm-1 selectedTD">
                <button class="transparent" disabled>
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                </button> 
            </td>
            <td class="col-sm-1">
                <button class="transparent" disabled>
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                </button>   
            </td>
            <td class="col-sm-1">
                <button class="transparent" disabled>
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                </button>   
            </td>
            <td class="col-sm-1">
                <button class="transparent" disabled>
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                </button>   
            </td>
            <td class="col-sm-1">
                <button class="transparent" disabled>
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                </button>  
            </td>
            <td class="col-sm-1">
                <button class="transparent" disabled>
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                </button>   
            </td>
            <td class="col-sm-1">
                <button class="transparent" disabled>
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                </button> 
            </td>
            <td class="col-sm-1">
                <button class="transparent" disabled>
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                </button>   
            </td>
        </tr>
        <tr>
            <td class="col-sm-2 selectedTD">
                <h5 class="text-white text-start">detailed information:</h5>
            </td>
            <td class="col-sm-1 selectedTD">   
                <button class="transparent" disabled>
                  <div class="row">
                      <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                           class="gborder">
                  </div>
                  <div class="row">
                        <span class="text-start smallText">some text</span>
                  </div>
                </button>   
            </td>
            <td class="col-sm-1 selectedTD">   
                <button class="transparent" disabled>
                  <div class="row">
                      <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                           class="gborder">
                  </div>
                  <div class="row">
                        <span class="text-start smallText">some text</span>
                  </div>
                </button>    
            </td>            
            <td class="col-sm-2 selectedTD" colspan="2">
                <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                  </button>   
            </td>
            <td class="col-sm-1 selectedTD">
                <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                </button>   
            </td>
            <td class="col-sm-1 selectedTD selectedTD">
                <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                </button>   
            </td>
            <td class="col-sm-1 selectedTD">
                <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                </button>   
            </td>
            <td class="col-sm-1 selectedTD">
                <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                </button>   
            </td>
            <td class="col-sm-1 selectedTD">
                <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                </button>   
            </td>
        </tr>
    </tbody>
</table>

周边变量：

第一行（“点击查看详细信息”）始终有 1 个 col-sm-2 和 10 个 col-sm-1 条目
第二行总是有 2 个 col-sm-2 和 7 个 col-sm-1 条目
图片必须保持其纵横比

如果浏览器窗口大小发生变化，如何将第二行的边框与第一行对齐？我希望第二行中带有 col-sm-2 类的一个 img 正好是 2 个项目，并且边框要在任何地方对齐。

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

您应该将 Bootstrap 的 row 类添加到您的 tr 元素中，以使列跨行对齐。

<tr class="row">

要删除图像周围的空间，请像这样删除填充：

.row img {
  padding: 0;
}

此外，您应该将父 row 添加到第一行的 img 元素中，以修复未对齐的图像边框。

你修改后的sn-p：

button.transparent {
  background: transparent;
  border: none !important;
}

.gborder {
  border: 4px solid green;
  /* outline: 2px solid white; */
}

.selectedTD {
  background-color: grey !important;
  border-bottom: 2pt solid grey;
}

span.smallText {
  color: white;
  font-size: 70%;
}

.imgButton {
  cursor: pointer;
  background-size: cover;
  /* background-size: contain; */
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-height: 48px;
}

.row img {
  padding: 0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<table class="table table-striped table-hover caption-top">
  <tbody id="table">
    <tr class="row">
      <td class="col-sm-2">
        <h5 class="text-start">click for details:</h5>
      </td>
      <td class="col-sm-1 ">
        <button class="transparent" disabled>
                    <div class="row">
                    <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                         </div>
                </button>
      </td>
      <td class="col-sm-1">
        <button class="transparent" disabled>
                                       <div class="row">
 <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                                        </div>
 </button>
      </td>
      <td class="col-sm-1 selectedTD">
        <button class="transparent" disabled>
                                       <div class="row">
 <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                                      </div>
   </button>
      </td>
      <td class="col-sm-1">
        <button class="transparent" disabled>
                                        <div class="row">
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                                        </div>
 </button>
      </td>
      <td class="col-sm-1">
        <button class="transparent" disabled>
                                      <div class="row">
  <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                                         </div>
</button>
      </td>
      <td class="col-sm-1">
        <button class="transparent" disabled>
                                        <div class="row">
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                                        </div>
 </button>
      </td>
      <td class="col-sm-1">
        <button class="transparent" disabled>
                                       <div class="row">
 <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                                        </div>
 </button>
      </td>
      <td class="col-sm-1">
        <button class="transparent" disabled>
                                        <div class="row">
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                                         </div>
</button>
      </td>
      <td class="col-sm-1">
        <button class="transparent" disabled>
                                        <div class="row">
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                                        </div>
 </button>
      </td>
      <td class="col-sm-1">
        <button class="transparent" disabled>
                                        <div class="row">
<img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                         class="gborder imgButton">
                                         </div>
</button>
      </td>
    </tr>
    <tr class="row">
      <td class="col-sm-2 selectedTD">
        <h5 class="text-white text-start">detailed information:</h5>
      </td>
      <td class="col-sm-1 selectedTD">
        <button class="transparent" disabled>
                  <div class="row">
                      <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                           class="gborder">
                  </div>
                  <div class="row">
                        <span class="text-start smallText">some text</span>
                  </div>
                </button>
      </td>
      <td class="col-sm-1 selectedTD">
        <button class="transparent" disabled>
                  <div class="row">
                      <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                           class="gborder">
                  </div>
                  <div class="row">
                        <span class="text-start smallText">some text</span>
                  </div>
                </button>
      </td>
      <td class="col-sm-2 selectedTD" colspan="2">
        <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                  </button>
      </td>
      <td class="col-sm-1 selectedTD">
        <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                </button>
      </td>
      <td class="col-sm-1 selectedTD selectedTD">
        <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                </button>
      </td>
      <td class="col-sm-1 selectedTD">
        <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                </button>
      </td>
      <td class="col-sm-1 selectedTD">
        <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                </button>
      </td>
      <td class="col-sm-1 selectedTD">
        <button class="transparent" disabled>
                    <div class="row">
                        <img src="https://i.pinimg.com/originals/80/74/c0/8074c06da560a31b0aff51fad8b93cc1.jpg" 
                             class="gborder">
                    </div>
                    <div class="row">
                          <span class="text-start smallText">some text</span>
                    </div>
                </button>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

但您的图像也没有“合适的边框”。边框和图片之间有空隙（特别看第二行）。
我相应地更新了我的答案。现在可以按预期为您工作了吗？
已修复，在您的第一行中，img 元素缺少周围的 .row 元素。
是的，只需像这样添加一些填充：.row { padding: 0.4em; }
会看看。