CODEWITHSUNDEEP
cssjquery-uiresizablecss-tables
Jamie Taylor
Jamie Taylor

Reputation: 4765

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)

Upvotes: 1

Views: 2101

Answers (3)

Paramasivan
Paramasivan

Reputation: 791

Try adding the following css

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

JsFiddle

Upvotes: 1

CJdriver
CJdriver

Reputation: 458

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

img {
  width:100%;
}

Fiddle Example

Upvotes: 1

Jamie Taylor
Jamie Taylor

Reputation: 4765

Feeling a big silly now.

Fixed this by adding these CSS Styles:

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

jsFiddle

Upvotes: 0

Related Questions