Динамическое масштабирование изображений по высоте с использованием чистого CSS в Chrome 27 и выше

Question

Благодаря решению James Montagne's я построил однострочную галерею, которая масштабирует изображения в specific behaviour, используя CSS.

Отлично работает - кроме Chrome 27 и выше. Здесь ширина изображений остается на начальном значении, пока высота шкалы правильно.

Пожалуйста, проверьте this Fiddle или код ниже:

HTML:

<div> 
    <img src="http://placekitten.com/200/300" class="vert"/> 
    <img src="http://placekitten.com/500/200" class="horiz"/> 
    <img src="http://placekitten.com/200/300" class="vert"/> 
    <img src="http://placekitten.com/400/300" class="horiz"/> 
    <img src="http://placekitten.com/200/300" class="vert"/> 
</div> 

CSS:

body,html{ 
    height: 100%; 
} 

div{ 
    white-space: nowrap; 
    height: 100%; 
} 

img{ 
    min-height: 200px; 
    height: 100%; 
    vertical-align: top; 
} 

.horiz{ 
    max-height: 300px; 
} 

.vert{ 
    max-height: 500px; 
} 

Я уже вырыл через Chrome 27 changelog (~ 13MB), но ничего не нашел полезная информация по этому вопросу.

Любые идеи о том, как избежать размытия изображений при изменении размера окна в Chrome> = 27?

Answer 1

Если вы хотите изменить размеры изображений с помощью CSS, вы должны выбрать одно измерение для изменения, а другое - автоматически настроить.

В этом случае, если вы больше озабочены шириной изображений, вы можете избавиться от min-height и сделать что-то вроде этого:

body,html{ 
    height: 100%; 
} 

div{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
} 

img{ 
    float: left; 
    height: auto; 
    vertical-align: top; 
    width: 19%; 
    margin: 0.5%; 
} 

См примера here.

Поскольку я знаю, что у вас есть ряд из 5 изображений, мы можем использовать ширину 19% ширины div и хорошо вписывать их.

EDIT

С другой стороны, если вы хотите, чтобы контролировать минимальную и максимальную высоту, вы можете обернуть свои изображения в контейнере, явно указать высоту на этом контейнере, и расположить изображения в пределах контейнер. Здесь вы теряете способность контролировать сохранение всех изображений на одной строке при сохранении исходного соотношения сторон.

Этот пример here.