Я хочу, чтобы изображение покрывало весь видовой экран (или, насколько это возможно, без изменения соотношения сторон). Это довольно просто, как видно из MWE ниже.
<html>
<head>
<meta charset="utf-8" />
<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
#main { width: 100%; height: 100%; object-fit: contain; display: block; }
</style>
</head>
<body>
<img id="main" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png">
</body>
</html>
Однако я также хотел бы позволить пользователям увеличить его. Однако в приведенном выше примере масштабирование в браузере не имеет абсолютно никакого эффекта, предположительно потому, что width: 100% использует масштабированную ширину области просмотра. Как я могу это сделать?