CODEWITHSUNDEEP
cssimagebrowserresizewindow
Dan Collins
Dan Collins

Reputation: 1018

Resize an image dynamically with CSS inside a table-cell div

I am trying to create two columns of equal width, the left one containing text and the right one containing an image. I would like the image to resize down to the width of the column if the image width is greater than the column width, but would like the image to keep its original size if the image is less than the column width. I have tried the instructions in this question, but the image, if larger, will consume whatever space it needs, squishing the column on the left containing text. I am wondering if this has to do with how "table-cell" divs behave, or if it is a precedence issue where the browser will accommodate an image before text. My code looks something like this:

<div style="display: table; width:100%;">
    <div style="display: table-row;">
        <div style="display: table-cell; width: 50%; vertical-align: middle;">
            <h1>Header</h1>
            <p>Description</p>
        </div>
        <div style="display: table-cell; width: 50%; vertical-align: middle;">
            <img style="max-width: 100%;height:auto;" src="image.jpg">
        </div>
    </div>
</div>

Also, I am using FireFox as my browser to test. Thanks!

EDIT: I also tried an alternative method to get the same effect using float divs (code below). The problem is I would like the two columns middle-centered, and I cannot get the smaller float div to size to full height in the parent container, so the inner contents are top-aligned. However, the image does resize properly, which backs up my hunch that this problem is related to how "table-cell" divs behave.

<div style="position: relative;">
    <div style="float: left; width: 50%;height:100%;background-color:#F00;">
        <div style="display: table;height:100%;width:100%;">
            <div style="display: table-row;height:100%;width:100%;">
                <div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
                    <p>content</p>
                </div>
            </div>
        </div>
    </div>
    <div style="float: left; width: 50%;height:100%;background-color:#F00;">
        <div style="display: table;height:100%;width:100%;">
            <div style="display: table-row;height:100%;width:100%;">
                <div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
                    <img style="max-width:100%;height:auto;" src="image.jpg">
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Views: 4593

Answers (1)

lycorine
lycorine

Reputation: 308

Code was working fine in Chrome. This seems to be an issue only in Firefox as per this article: http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/

Adding table-layout:fixed; to the div styled display:table; gives the results you're looking for- allowing the image max-width to work and respecting the cell widths.

<div style="display: table; width:100%; table-layout: fixed">
  <div style="display: table-row;">
    <div style="display: table-cell; width: 50%; vertical-align: middle;">
      <h1>Header</h1>
      <p>Description</p>
    </div>
    <div style="display: table-cell; width: 50%; vertical-align: middle;">
      <img style="max-width: 100%;height:auto;" src="image.png">
    </div>
  </div>
</div>

Upvotes: 3

Related Questions