HTML - 如何制作各种大小的图像填充表格单元格

我正在制作一个学校项目的网站，并实施了一张表格，其中包含应该调整大小以便完全填充每个表格单元格的图像。这适用于大多数情况，但是，当表单元格的行跨度大于1时，映像不会按预期调整大小。这个问题不会发生colspan> 1.任何帮助，将不胜感激。HTML - 如何制作各种大小的图像填充表格单元格

相关的代码可以发现如下：

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>

来源

2017-06-14 Callum Daniel

您的'colspan'图像和'rowspan'图像确实占据了其容器的100％。您是否尝试创建占据1列但是2行的图像？ –

试试这个

集图像作为个标签的背景

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>

来源

2017-06-14 00:50:34

HTML - 如何制作各种大小的图像填充表格单元格

回答

相关问题