christian christian - 1 year ago 93
HTML Question

IE10 max-width fails on image inside fixed layout table columns

When trying to restrict an image to a

max-width
of
100%
, the
max-width
property fails to work in IE10 when inside a
table cell
with a set
width
and a
table-layout: fixed
.

How can I force this while maintaining the
table-cell
display properties?

CodePen



.row {
max-width: 700px;
margin: 0 auto;
display: table;
table-layout: fixed;
}
.photo,
.text {
display: table-cell;
vertical-align: middle;
}
.photo {
width: 25%;
img {
max-width: 100%;
height: auto;
}
}
.text {
width: 75%;
}
HTML <div class="row"> <div class="photo"><img src="http://lorempixel.com/1000/600/sports/1/" alt="" /></div> <div class="text"> Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus,
officia,
asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt,
ea ipsa eos quidem. Aperiam iste voluptate expedita illum,
suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates,
ad. Pariatur rem similique,
cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione corrupti quod repellat quo,
vitae veritatis et magnam doloribus mollitia tenetur? </div> </div> .row {
max-width: 700px;
margin: 0 auto;
display: table;
table-layout: fixed;
}
.photo,
.text {
display: table-cell;
vertical-align: middle;
}
.photo {
width: 25%;
img {
max-width: 100%;
height: auto;
}
}
.text {
width: 75%;
}

<div class="row">
<div class="photo">
<img src="http://lorempixel.com/1000/600/sports/1/" alt="" />
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus, officia, asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt, ea
ipsa eos quidem. Aperiam iste voluptate expedita illum, suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates, ad. Pariatur rem similique, cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione
corrupti quod repellat quo, vitae veritatis et magnam doloribus mollitia tenetur?
</div>
</div>




Answer Source

Problem

This happens because you have your table also with max-width and because img is an inline element.

Explanation

min/max-width won't apply to non replaced inline elements.

W3C specs says:

10.4 Minimum and maximum widths: min-width and max-width

max-width

Applies to: all elements but non-replaced inline elements, table rows, and row groups

Possible solutions:

  • you can just set it width:100% in img

or

  • set width:700px in table

.row {
  max-width: 700px;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}
.photo,
.text {
  display: table-cell;
  vertical-align: middle;
}
.photo {
  width: 25%;
}
.photo img {
  width: 100%;
  height: auto;
}
.text {
  width: 75%;
}
<div class="row">
  <div class="photo">
    <img src="http://lorempixel.com/1000/600/sports/1/" alt="" />
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio facilis debitis sequi hic iusto nostrum fugiat. Temporibus rem repellendus, officia, asperiores perspiciatis delectus labore odio iste voluptatum consectetur quibusdam magnam deserunt, ea
    ipsa eos quidem. Aperiam iste voluptate expedita illum, suscipit animi quas eum sed omnis reiciendis optio molestiae maiores sunt voluptates, ad. Pariatur rem similique, cupiditate impedit a iure odio laboriosam quaerat in magni vel at incidunt ratione
    corrupti quod repellat quo, vitae veritatis et magnam doloribus mollitia tenetur?
  </div>
</div>

Note

Also occurs in IE11.