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


i trying create 2 columns of equal width, left 1 containing text , right 1 containing image. image resize down width of column if image width greater column width, image keep original size if image less column width. have tried instructions in this question, image, if larger, consume whatever space needs, squishing column on left containing text. wondering if has how "table-cell" divs behave, or if precedence issue browser accommodate image before text. code looks 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, using firefox browser test. thanks!

edit: tried alternative method same effect using float divs (code below). problem 2 columns middle-centered, , cannot smaller float div size full height in parent container, inner contents top-aligned. however, image resize properly, backs hunch problem related 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>

code working fine in chrome. seems issue in firefox per article: http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/

adding table-layout:fixed; div styled display:table; gives results you're looking for- allowing image max-width work , respecting 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>

Comments

Post a Comment

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

i make custom datepicker directive custom template. but have no idea how start building it... how include date data directive? i appreciate guide or give me advice work on more precisely. it might you! follow below steps html code sample: <label>birth date</label> <input type="text" ng-model="birthdate" date-options="dateoptions" custom-datepicker/> <hr/> <pre>birthdate = {{birthdate}}</pre> <script type="text/ng-template" id="custom-datepicker.html"> <div class="enhanced-datepicker"> <div class="proxied-field-wrap"> <input type="text" ui-date-format="yy-mm-dd" ng-model="ngmodel" ui-date="dateoptions"/> </div> <label> <button class="btn" type="button"><i class="icon-calendar"></i>
Read more

javascript - jQuery date picker - Disable dates after the selection from the first date picker -

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function () { $("#datepicker1").datepicker(); }); </script> <script> $(function () { $("#datepicker2").datepicker(); }); </script> </head> <body> <p>date 1: <input type="text" id="datepicker1"></p> <p>date 2: <input type="t
Read more