可调整大小的表格单元格以缩小小于内容答案

【问题标题】：Resizable table-cell to shrink smaller than content可调整大小的表格单元格以缩小小于内容
【发布时间】：2014-01-17 16:09:06
【问题描述】：

我设置了 2 个 div 标签，外层的标签是display:table，内层的标签是display:table-cell。在这些里面我有一张图片。

当我使用 jQuery UI 的 resizable() API 调整框的大小时，我无法将其缩小到小于图像。

标记：

<div class="resizebox">
    <div class="content">
        <img src="http://placehold.it/300x60">
    </div>
</div>

CSS：

.resizebox {
    border:1px solid black;
    height:100px;
    width:320px;
    overflow:hidden;
    display:table;
}
.resizebox .content {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

jsFiddle

我在顶部可调整大小的框下添加了另一个示例，以演示我试图实现的那种行为（同时保留 CSS 表）

【问题讨论】：

标签： css jquery-ui resizable css-tables

【解决方案1】：

你打败了我。只需使用常规的 'ol 宽度：100%;

img {
  width:100%;
}

Fiddle Example

【讨论】：

哈哈，谢谢。我想我还是把这个给你！（当它允许我接受时）
是的，这完全取决于您是否希望图像在框超过其原始大小的情况下继续扩展。
是的，我明白了，谢谢老兄！

【解决方案2】：

尝试添加以下css

.resizebox .content img {
   width:100%;
   max-width:100%;
 }

JsFiddle

【讨论】：

【解决方案3】：

现在感觉很傻。

通过添加这些 CSS 样式解决了这个问题：

.resizebox img {
    max-width:100%;
    max-height:100%;
}

jsFiddle

【讨论】：