webcompat/webcompat-howto

max-width: 100% in a table layout

karlcow opened this issue · 1 comments

karlcow commented

An issue which has been creating some problems in some sites with a combination of max-width:100% and display:table;

<div class="table">
   <a href='…'> <img src='…'/></div>
</div>

with the common CSS:

div.table {display:table;}
a {display:table-cell;}
img {max-width:100%;}

tables adjust to inner content so if the image is bigger it will not fit in the table cell width aka a element here. Unfortunately Safari (WebKit) and Opera/Chrome (Blink) adjusts the size of the image to the inner context. A way to solve this for Firefox is to set table-layout: fixed;

div.table {
    display:table;
    table-layout:fixed;}
a {display:table-cell;}
img {max-width:100%;}