使表格标题与图像大小相同

编程问答 2022-09-02

问题描述

我使用表格在第一个单元格中添加图像，并在第二个单元格中添加标题。但是，我面临的问题是字幕宽度大于图像宽度（在宽屏幕中）。

我尝试在标签中使用 width="10%" 来解决这个问题，它工作了一段时间，但现在它使图像变小，成为 Bootstrap v3.3.4 中的响应式图像类。我还尝试在标题 style="position: absolute" 标签中添加 td，但没有奏效。 captionwidth 类设置为：width: 1px !important。我看到了 this answer，但我坚持使用静态 html 表来修复，所以我需要使以下 html 工作。

.captionwidth {
  width: 1px !important
}
<table border="0" align="left" cellspacing="4" cellpadding="4" class="table table-responsive" >
    <tr>
        <td>
        <p align="center">
  <a href="">
  <font style="font-size: 14pt; ">
  <img class="img-responsive" border="0" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg/640px-Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" alt="" width="640" height="425"></a></font></td>
    </tr>
    <tr>
        <td class="captionwidth">
<p class="caption" align="center" dir="rtl"><span lang="en-us"><font size="4">Paracas National Reserve,Ica,Peru. View of the coast and sea from the top of the headland La Cattedrale.  View of the coast and sea from the top of the headland La Cattedrale. </font></span></td>
    </tr>
</table>

解决方法

图像和字体大小将在下面的代码中响应，具体取决于可用的屏幕大小。

.small{
font-size:3vw;
text-align:center;
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width:100%;
 
}
.tablec{
border: 1px solid #dddddd;
align:left;
cellspacing:4 ;
cellpadding:4 ;
class:table table-responsive;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>

</style>
</head>
<body>

<table class="tablec" >
    <tr>
        <td>
  <a href="">
  <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg/640px-Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" alt="Ocean" ></a></td>
    </tr>
    <tr>
        <td>
<p class="caption"  dir="rtl"><span><p class="small">Paracas National Reserve,Ica,Peru. View of the coast and sea from the top of the headland La Cattedrale.View of the coast and sea from the top of the headland La Cattedrale. </p></span></td>
    </tr>
</table>

</body>
</html>

captionhtmlhtml-tableresponsive-design