使用图像宽度作为表格单元格的最大大小

Question

我会尝试表达我想要达到的目标。考虑我们有一些带有标题的文字和图像，文字必须向左流动图像。所以我们将有这样的HTML代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13; 正如你所看到的，我希望表的最大宽度为45％，但要尊重单元格的宽度。

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

我想要实现的是，只有图像原始宽度可以通过 css和html 来控制表格宽度。因此，如果图像原始宽度小于最大宽度：45％，则表格宽度必须更小，例如30％，如果图像最大尺寸大于45％或相同，则最大宽度：45％必须用作桌子宽度。 图像尺寸未知，它们可能不同，因此不允许在css或html中直接使用它们。

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

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

Answer 1

最简单的方法是将表包装在另一个容器中，因为max-width和tables不能很好地协同工作。

＆＃13;

＆＃13;

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

＆＃13;

<div class="img-right">
<table class="table-img-right">
  <tr>
    <td><img src="http://placehold.it/500x500" /></td>
  </tr>
  <tr>
    <td class="img-label"><p>Caption of an image</p></td>
  </tr>
</table>
</div>
<p>Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum.
</p>

<div class="img-right">
<table class="table-img-right">
  <tr>
    <td><img src="http://placehold.it/100x100" /></td>
  </tr>
  <tr>
    <td class="img-label"><p>Caption of an image</p></td>
  </tr>
</table>
</div>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我会使用DIV在CSS和HTML中完成所有操作。这使得站点对小屏幕的响应变得更容易。看我的例子：

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;} 

}