webkit: изменение размера изображений в соотношении

Question

Я использую jquery mobile и Safari (iPad). И I'm встраивание один образ, как:

<img src="test.png"> 

Так с CSS я пытаюсь сделать это resonsive:

 .ui-content img{ 
      display:block; 
      border:1px solid #c8c8b9; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      max-width:100%;    } 

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

Как это изменить?

Answer 1

методика его поддерживать соотношение сторон, чтобы обернуть изображение в контейнер с height: 0; и пропорциональной padding-bottom

Смотрите эту codepen: http://codepen.io/anon/pen/mBpwF
В примере я выбрал 1440x900 пикселей изображения. Таким образом, высота 62.5% ширины, так что я использовал CSS

div { 
    border: 1px red solid; 
    height: 0; 
    width: 100%; 
    max-width: 1440px; /* the original image width */ 
    padding-bottom: 62.5%; /* the original height in % (1440 * 62.5% = 900px) */ 
} 

img { 
    display: block; 
    width: 100%; 
} 

Как вы можете увидеть, если вы измените размер окна, изображение mantains правильно его отношение

Answer 2

Попробуйте добавить height: auto; в CSS. Это обычно делает трюк для меня. Кроме того, убедитесь, что ни один другой CSS не влияет на размеры изображения.

.ui-content img{ 
    display: block; 
    border: 1px solid #c8c8b9; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    max-width: 100%; 
    height: auto;    
}