Question

我设置了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表）

Answer 1

你打败了我。只需使用常规'ol width：100％;

img {
  width:100%;
}

Fiddle Example

Answer 2

尝试添加以下css

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

JsFiddle

Answer 3

现在感觉很傻。

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

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

jsFiddle

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

3 个答案: