Блог

Итак, в другом посте мне предложили использовать max-height:100% , но это не помогает, и когда я поворачиваю свой Galaxy S4 и он переходит в альбомный режим, высота масштабируется плохо, и я вижу только часть изображения, несмотря на всю высоту. Есть ли другое решение для этого?

 <meta content="width=device-width, initial-scale=1" name="viewport" />
<p align="center"><img src="https://uwmadison.qualtrics.com/CP/Graphic.php?IM=IM_00pfOKSXTudGqfb" style="height: 470px;" /></p>
<style type="text/css">/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    img { max-width: 100%; }
}
/* samsung */
@media only screen and (min-device-width : 320px) and (max-device-width : 321px) {
    img { max-width: 100%; }
}


@media only screen 
and (min-width : 321px) {
img { max-width: 100%; max-height: 100%;}

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
img {max-width: 100%;  }
}
</style>
  

Это то, что я вижу, когда поворачиваю телефон горизонтально (альбомный режим)

Я использовал следующий jQuery, но когда я переворачиваю телефон, получается, что просто отображается 90 (или 80)% изображения. Есть идеи, как это исправить? Вот код jQuery: http://jsfiddle.net/7dVKz/5 / и вот что я вижу:

Один из способов сделать это с помощью JS (в частности, jQuery) — прослушать изменение размера окна $(window).resize() , а затем отрегулировать размер изображения, чтобы оно соответствовало размеру экрана.

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

Редактировать: Вычислите высоту и ширину изображения:

 var $img = $('your image selector here');
$img.css({
    maxWidth : $(window).width(),
    maxHeight : $(window).height()
});
// This is set in a different command because of the dependencies with the properties above.
// Do not merge these together.
$img.css({
    marginLeft : $img.width() / (-2),
    top: ($(window).height() - $img.height()) / 2
})