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

Question

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 1

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.

Answer 2

In your CSS, instead of:
.photo{
width: 25%;
img{
max-width: 100%;
height: auto;
}
}
try:
.photo{
width: 25%;
}
.photo img{
max-width:170px; /* Or another size*/
width:100%;
height: auto;
}
Besides separating the two elements, this says "Make my image 100%, unless it's bigger than 170px. Tested in IE as well.