HTML - 如何使图像填充 table 各种大小的单元格
HTML - How to make an image fill table cells of various sizes
我正在为一个学校项目制作一个网站,并实施了一个 table,其中包含应该调整大小以完全填满每个 table 单元格的图像。这在大多数情况下都按预期工作,但是,当 table 单元格的行跨度 > 1 时,图像不会按预期调整大小。 colspan > 1 时不会出现此问题。如有任何帮助,我们将不胜感激。
相关代码如下:
th {
width: 200px;
height: 200px;
padding: 0;
}
.grid_img {
width: 100%;
height: 100%;
display: table-header-group;
}
<table cellspacing="30">
<tr>
<th class="box"><img id="img_01" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_1.jpg"></th>
<th rowspan="2"><img id="img_02" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_2.jpg"></th>
<th class="box"><img id="img_03" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_3.jpg"></th>
<th class="box"><img id="img_04" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_4.jpg"></th>
<th class="box"><img id="img_05" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_5.jpg"></th>
</tr>
<tr>
<th class="box"><img id="img_06" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_6.jpg"></th>
<th class="long_box" colspan="2"><img id="img_07" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_7.jpg"></th>
<th class="box"><img id="img_08" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_8.jpg"></th>
</tr>
<tr>
<th class="long_box" colspan="2"><img id="img_09" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_9.jpg"></th>
<th class="box"><img id="img_10" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_10.jpg"></th>
<th class="long_box" colspan="2"><img id="img_11" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_11.jpg"></th>
</tr>
</table>
试试这个
将图像设置为第 th 个标签的背景
th {
min-width: 200px;
width: 200px;
height: 200px;
padding: 0;
background-repeat: no-repeat !important;
background-size: cover !important;
}
<table cellspacing="30">
<tr>
<th class="box" id="img_01" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_1.jpg)"></th>
<th rowspan="2" id="img_02" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_2.jpg)"></th>
<th class="box" id="img_03" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_3.jpg)"></th>
<th class="box" id="img_04" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_4.jpg)"></th>
<th class="box" id="img_05" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_5.jpg)"></th>
</tr>
<tr>
<th class="box" id="img_06" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_6.jpg)"></th>
<th class="long_box" colspan="2" id="img_07" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_7.jpg)"></th>
<th class="box" id="img_08" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_8.jpg)"></th>
</tr>
<tr>
<th class="long_box" colspan="2" id="img_09" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_9.jpg)"></th>
<th class="box" id="img_10" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_10.jpg)"></th>
<th class="long_box" colspan="2" id="img_11" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_11.jpg)"></th>
</tr>
</table>
我正在为一个学校项目制作一个网站,并实施了一个 table,其中包含应该调整大小以完全填满每个 table 单元格的图像。这在大多数情况下都按预期工作,但是,当 table 单元格的行跨度 > 1 时,图像不会按预期调整大小。 colspan > 1 时不会出现此问题。如有任何帮助,我们将不胜感激。
相关代码如下:
th {
width: 200px;
height: 200px;
padding: 0;
}
.grid_img {
width: 100%;
height: 100%;
display: table-header-group;
}
<table cellspacing="30">
<tr>
<th class="box"><img id="img_01" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_1.jpg"></th>
<th rowspan="2"><img id="img_02" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_2.jpg"></th>
<th class="box"><img id="img_03" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_3.jpg"></th>
<th class="box"><img id="img_04" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_4.jpg"></th>
<th class="box"><img id="img_05" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_5.jpg"></th>
</tr>
<tr>
<th class="box"><img id="img_06" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_6.jpg"></th>
<th class="long_box" colspan="2"><img id="img_07" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_7.jpg"></th>
<th class="box"><img id="img_08" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_8.jpg"></th>
</tr>
<tr>
<th class="long_box" colspan="2"><img id="img_09" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_9.jpg"></th>
<th class="box"><img id="img_10" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_10.jpg"></th>
<th class="long_box" colspan="2"><img id="img_11" class="grid_img" src="https://asherwolfphotography.000webhostapp.com/images/image_11.jpg"></th>
</tr>
</table>
试试这个
将图像设置为第 th 个标签的背景
th {
min-width: 200px;
width: 200px;
height: 200px;
padding: 0;
background-repeat: no-repeat !important;
background-size: cover !important;
}
<table cellspacing="30">
<tr>
<th class="box" id="img_01" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_1.jpg)"></th>
<th rowspan="2" id="img_02" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_2.jpg)"></th>
<th class="box" id="img_03" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_3.jpg)"></th>
<th class="box" id="img_04" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_4.jpg)"></th>
<th class="box" id="img_05" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_5.jpg)"></th>
</tr>
<tr>
<th class="box" id="img_06" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_6.jpg)"></th>
<th class="long_box" colspan="2" id="img_07" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_7.jpg)"></th>
<th class="box" id="img_08" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_8.jpg)"></th>
</tr>
<tr>
<th class="long_box" colspan="2" id="img_09" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_9.jpg)"></th>
<th class="box" id="img_10" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_10.jpg)"></th>
<th class="long_box" colspan="2" id="img_11" class="grid_img" style="background: url(https://asherwolfphotography.000webhostapp.com/images/image_11.jpg)"></th>
</tr>
</table>