Search code examples
cssjquery-uiresizablecss-tables

Resizable table-cell to shrink smaller than content

I have set up 2 div tags, the outer one with display:table and the inner one with display:table-cell. Inside these I have an image.

When I resize the box using jQuery UI's resizable() API, I am unable to shrink it smaller than the image.

Markup:

<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

I've added another example under the top resizable box to demonstrate the kind of behavior I'm trying to achieve (while keeping the CSS Table)

Solution

  • You beat me to it. Just using regular 'ol width: 100%;

    img {
  width:100%;
}

    Fiddle Example