Я пытаюсь создать свою первую веб-страницу без опыта ... У меня есть два больших изображения (каждое больше, чем умещается на экране). Я хочу, чтобы они отображались один над другим, чтобы они оба автоматически меняли размеры, чтобы они всегда помещались на экране, независимо от размера экрана (рабочий стол или мобильный телефон). Я могу заставить это работать для одного изображения (одно изменение размера изображения для размещения на любом экране), например так:
<!DOCTYPE html>
<html>
<head>
<style>
.fit-me {
max-width: 100%;
max-height: 100vh;
}
</style>
</head>
<body>
<div>
<img src="images/img.png" class="fit-me">
</div>
</body>
</html>
Я думал, что было бы просто экстраполировать это поведение на несколько изображений, вместо этого применяя size-limit class для div, так что размер всего div изменяется:
<!DOCTYPE html>
<html>
<head>
<style>
.fit-me
max-width: 100%;
max-height: 100vh;
}
</style>
</head>
<body>
<div class="fit-me">
<img src="images/img.png">
<img src="images/img2.png">
</div>
</body>
</html>
Однако это не относится к масштабированию. Все, что я вижу, это небольшая часть первого изображения, и мне нужно прокрутить, чтобы увидеть все остальное.
Как мне масштабировать весь раздел div? Я мог бы применить ограничение 50% к каждому изображению, но я хочу, чтобы оно было динамическим c, потому что я хочу иметь возможность добавлять более двух изображений в конечном итоге.