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

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

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

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

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 (~13 МБ), но не нашел никакой полезной информации по этому вопросу.

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


google-chrome image-scaling css
person Thorsten    schedule 13.01.2014    source источник
comment
Возможный дубликат stackoverflow.com/questions/14718050/   -  person Eisa Adil    schedule 14.01.2014
comment
Спасибо, что указали на этот пост, @Eisa! Но это не единственное решение для CSS. Суть такова: принудительно перерисуйте с помощью JS. Я буду иметь это в виду, хотя мне не нравится идея прикреплять перерисовку к событию изменения размера окна.   -  person Thorsten    schedule 14.01.2014

Ответы (1)


arrow_upward
0
arrow_downward

Если вы хотите изменить размеры изображений с помощью 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%;
}

См. пример здесь.

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

ИЗМЕНИТЬ

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

Этот пример находится здесь.

person seancdavis    schedule 13.01.2014
comment
Спасибо за ваши предложения @scdavis41! Но это не то, что я ищу. Мне нужно такое же поведение масштабирования, как показано в моей опубликованной скрипке. Этот код работает в новейших версиях других популярных браузеров, поэтому я предполагаю, что необходима лишь небольшая модификация, чтобы этот код также работал в более новых версиях Chrome. - person Thorsten; 14.01.2014