Я хотел бы, чтобы изображение соответствовало экрану, не обрезанное в портретном и ландшафтном режимах для гибкого дизайна. Я пробовал:CSS для автоматической установки изображения на экран при повороте iPhone от портрета к пейзажу
<!doctype html>
<html>
<head>
<style>
img {
max-height:100%;
max-width:100%;
}
</style>
<meta name="viewport" content="initial-scale=1.0" />
</head>
<body>
<center>
<img src = "http://www.terragalleria.com/tmp/square.jpg" />
</center>
</body>
</html>
Изображение представляет собой квадрат. Если страница загружена, когда iPhone находится в портретной ориентации, она растягивается, чтобы заполнить ширину экрана, с пространством внизу, и это то, что я хотел.
Однако, если я поворачиваю iPhone в альбомную ориентацию, изображение теперь растягивается, чтобы заполнить ширину экрана и обрезается в вертикальном направлении. Вместо этого я хотел бы, чтобы изображение растягивалось, чтобы заполнить высоту экрана белым пространством по бокам.
Для того, чтобы это увидеть, мне нужно перезагрузить страницу. Есть ли способ добиться правильного изменения размера при ротации iPhone без необходимости перезагрузки страницы пользователем?
Отличный ответ, спасибо! –
Не могли бы вы принять его в качестве ответа, пожалуйста? И приветствую вас! –
Извините, до сих пор не понял эту функцию! –