[英]scale image inside button with cell size of table - bootstrap
I want a row of buttons in a table, that each is represented by a pic and the button is with transparent border/background.我想要表格中的一排按钮,每个按钮都由图片表示,并且按钮具有透明边框/背景。
I put each button in one of the 10 remaining cells of a table using <td class="col-sm-1">
and I tried to make the imgs cover
- but the border does not align with the border of the image in the line above:我使用
<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>
Surrounding variables:周边变量:
col-sm-2
and 10 col-sm-1
entriescol-sm-2
和 10 col-sm-1
条目col-sm-2
and 7 col-sm-1
entriescol-sm-2
和 7 col-sm-1
条目How can I align the border of the second line with the first one in case of browser window size changes?如果浏览器 window 大小发生变化,如何将第二行的边框与第一行对齐? I'd like the one img in line two with
col-sm-2
class to be exactly 2 items big, and the borders to align everywhere.我希望带有
col-sm-2
class 的第二行中的一个 img 正好是 2 个项目,并且边界到处对齐。
You should add Bootstrap's row
class to your tr
element, to make the columns aligned across rows.您应该将 Bootstrap 的
row
class 添加到您的tr
元素中,以使列跨行对齐。
<tr class="row">
To remove the space around the image, remove the padding like this:要删除图像周围的空间,请像这样删除填充:
.row img {
padding: 0;
}
Also, you should add parent row
to your img
elements in the first row, to fix the misaligned image borders.此外,您应该在第一行的
img
元素中添加父row
,以修复未对齐的图像边框。
Your modified snippet:您修改后的代码段:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.