html - 使用图像宽度作为表格单元格的最大尺寸

Question

我会尽力表达我想要达到的目标。考虑我们有一些带有标题的文本和图像，文本必须在图像的左侧流动。所以我们将有这样的 html 代码:

.img-right {
  float: right;
  width: auto;
  max-width:45%;
}
.img-right img {
  width:auto;
  display:block;
}
.img-label {
  background-color:gray;
}

<table class="img-right">
  <tr>
    <td><img src="image1.jpg" /></td>
  </tr>
  <tr>
    <td class="img-label"><p>Caption of an image</p></td>
  </tr>
</table>
<p>Some main content here</p>

如您所见，我希望表格的最大宽度为 45%，但要尊重单元格的宽度。

问题来了，我希望表格宽度与图像原始宽度相同。在只有图像的情况下很容易，但是当我有一些长图像标题时，它会扩展表格宽度，因此图像将小于表格宽度。

我想实现的是只有图像原始宽度可以控制表格宽度，借助于css 和html only。所以如果图片原始宽度小于 max-width:45%，表格宽度必须更小，比如 30%，如果图片最大尺寸大于 45% 或相同，那么 max-width:45% 必须用作表宽度。 图片大小未知，它们可以不同，所以不允许直接在css或html中使用它们。

我做了研究，看起来在纯 css 中是不可能的，但也许你可以帮助我，谢谢!

问题示例:http://jsfiddle.net/7xrLsyc3/11/

Answer 1

我会在 CSS 和 HTML 中用 DIV 制作它。这也使得网站响应小屏幕变得更容易。看我的例子:

http://jsfiddle.net/Preben/7xrLsyc3/4/

<div class="wrapimage">
    <div class="image">
        <img src="http://lorempixel.com/700/300/nature/" />
    </div>
    <div class="captiontext">
        Caption of an image. Caption of an image. Caption of an image. Caption of an image. Caption of an image
    </div>
</div>

和 CSS:

.wrapimage {
  float: right;
  max-width:45%;
}
.image img {
  max-width:100%;
  display:block;
}
.captiontext{
  margin-top:2px;
  background-color:gray;
  padding:2%;
}

以媒体查询为例:

@media (max-width:500px){
    .wrapimage {display:block;max-width:100%;margin-bottom:20px;} 

}