Chrome Squishing <img> на браузере высота изменить размер

Question

Это странный!

Работа над кросс-браузерным супер простым пользовательским интерфейсом, который имитирует редактор презентаций google docs. Проблема, которую я обнаружил, касается правильной части пользовательского интерфейса, которая содержит большой предварительный просмотр слайдов/изображений и сопутствующий «заметки».

Мой основной HTML скелет:

<div class="container"> 

    <div class="preview"> 
     <img src="http://lorempixel.com/800/600/business" />   
    </div> 

    <div class="otherthing"> 
     This is another UI thing, 20% height  
    </div> 

</div> 

И CSS для обработки масштабирования жидкости с браузером изменения размера:

body, html{ 
    width:100%; 
    height:100%; 
} 

*{ 
    box-sizing:content-box; /* ie */ 
    box-sizing:border-box; /* all others */ 
    -moz-box-sizing:border-box; /* except firefox */ 
} 

.container{ 
    width:100%; 
    height:100%; 
    position:relative; 
} 

.preview{ 
    width:100%; 
    height:80%; 
    position:relative; 
    text-align:center; 
} 

.preview img{ 
    height:90%; 
    width:auto;  
} 

.otherthing{ 
    width:100%; 
    height:20%; 
    background:#369; 
} 

Это работает в Firefox, Safari, Opera и IE обратно в 8! Однако в Chrome, если вы измените размер браузера (только высота), тег <img> будет сжиматься до тех пор, пока ширина браузера не будет настроена. Если вы изменяете ширину и ширину, она полностью масштабируется.

Вот скрипка: http://jsfiddle.net/zb5ek/

Кто-нибудь есть какие-либо идеи, что происходит/то, что я могу сделать, чтобы исправить это? Это темный день, когда вы обнаружите хромированные только ошибку :)

Answer 1

Попробуйте

.preview img{ 
    max-height:90%; 
    max-width:100%;  
} 

с помощью макс-высоты и максимальной ширины сделает его масштаб пропорционально.

Answer 2

Вы установите height для .preview img как 90% и width к auto. Но auto не означает «соответствовать другому параметру размера». Значение W3C explains auto в значении «Ширина зависит от значений других свойств».

The standard gives this explanation (соответствующая часть жирным шрифтом):

10.3.2 Инлайн, замещаемые элементы

Вычисленное значение «Auto» для «запаса левый» или «Правое поле» становится в используемое значение '0'.

Если «высота» и «ширина» и вычислили значения «Auto» и элемента также имеет внутреннюю ширину, то, что внутренняя ширина является используется значение «ширина».

Если «высота» и «ширина» и вычислили значения «авто» и элемент не имеет внутреннюю ширину, но имеют внутреннюю высоту и внутреннее отношение; или если «width» имеет вычисленное значение «auto», «height» имеет другое значение, и элемент имеет собственный коэффициент; то используется значение «ширины» является:

(используются высота) * (внутреннее отношение)

Если «высота» и «ширина» и вычислил значение «Авто» и элемента имеют внутреннюю но без внутренней высоты или ширины, то используемое значение «ширина» не определено в CSS 2.1. Однако, предположил, что если ширина используемого блока сама по себе не зависит от от ширины замененного элемента, тогда используемое значение «ширина» равно , рассчитанное по уравнению ограничения, используемому для уровня блока, неиспользуемые элементы в нормальном потоке.

В противном случае, если «ширина» имеет вычисленное значение «Auto», а элемент имеет внутреннюю ширину, то, что внутренняя ширина используемого значение «ширины» .

В противном случае, если «ширина» имеет вычисленное значение «Auto», но ни одно из условий, указанных выше не будут выполнены, то используется значение «ширина» становится 300px. Если 300px является слишком широким, чтобы соответствовать устройству, UA должны использовать ширину самого большого прямоугольника , который имеет соотношение 2: 1 и вместо этого подходит для устройства .

Answer 3

В результате этой проблемы с Chrome только несколько раз я научился создавать тег .css для конкретного изображения. Он может не соответствовать спецификациям, но он работает во всех браузерах. По крайней мере, насколько я могу судить.

Например, сегодня вечером я вложил изображение 222x1048 пикселей в блок текста. Я решил, что изображение должно иметь больше высоты, поэтому я переработал графику до 222x1744 пикселей и внес соответствующие изменения в html. Тем не менее, Chrome не примет новое значение высоты и усекает изображение до 222x1048. (как кто-то писал, хлюпал его) Кстати, очистка кеша Chrome имела нулевой эффект.

Исходный код следующим образом:

.rghtimgd 
{ 
    text-align: right; 
    float: right; 
    margin: 11px 0 0 22px; 
    clear: left; 
} 

Новый код теперь гласит:

.rghtimgdxt 
{ 
    text-align: right; 
    float: right; 
    margin: 11px 0 0 22px; 
    clear: left; 
    height: 1744px; 
    width: 222px; 
} 

Это утомительно, я полагаю, но теперь образ делает правильно. Такое несоответствие между браузерами приводит меня к отвлечению внимания, но я отказываюсь быть заглушенным проблемами кода.

Answer 4

ширина: авто по изображениям в настоящее время по-прежнему не работает в Chrome.

Я заполнил отчет об ошибке здесь:

https://code.google.com/p/chromium/issues/detail?id=503000