пропорциональное изменение размера изображения в Chrome

Question

Я пытаюсь показать пару изображений на 65% от их исходного размера, используя это правило CSS:

div#midline .artistEntry img {
    height: 65%;
    width: 65%;
}

В IE и Firefox вроде бы нормально работает

Но в Chrome это выглядит ужасно. Кажется, что ширина изображения была правильно уменьшена, но высота фактически была увеличена.

Есть ли способ пропорционального изменения размера изображения с помощью CSS, который работает во всех современных браузерах? Если нет, я бы (неохотно) рассмотрел решение JavaScript / jQuery

Answer 1

#midline .artistEntry img {
    height : auto;
    width  : 65%;
}

Установка одного из измерений на auto (по умолчанию) должна сохранить соотношение сторон без изменений, растягивая другое измерение до процента от его родительского измерения.

Вот демонстрация: http://jsfiddle.net/Mu6h7/ (измените размер панели предварительного просмотра, чтобы соотношение сторон не изменилось)

Answer 2

удалить правило высоты или ширины.Определяя высоту и ширину, он захватит оба из них, если вы удалите один, он будет масштабироваться правильно.