HTML/CSS Регулировать изображение без переполнения ⇐ Html

[Anonymous]

Я не очень знаком с HTML и CSS. Я пытаюсь сделать что -то, что я думал, что с дисплеем было бы легко: Flex , кажется, не так. Может быть, это не правильный путь для того, что я хочу сделать! Он занимает всю высоту страницы и имеет фиксированную ширину 300px. Эта область может иметь вертикальную полосу прокрутки, если некоторые подвальные элементы переполнены. Этот прямоугольник не приклеивается к краям; Мы видим 20px чернокожих. Размер изображения должен автоматически уменьшаться, если ширина или высота окна недостаточно. Иногда будет только заголовок без подзаголовка или только изображение без какого -либо названия. Изображения не имеют такого же рациона и/или разрешения, поэтому они должны адаптироваться автоматически.
Вот мой HTML/CSS, который я начал писать. Я добавил несколько границ, чтобы увидеть мои области. Он работает горизонтально (если ширина недостаточно, изображение уменьшается), но не вертикально. < /P>

Код: Выделить всё

html,
body {
margin: 0;
padding: 0;
height: 100vh;
background: black;
box-sizing: border-box;
overflow: hidden;
}

#screen {
display: grid;
grid-template-columns: 300px 1fr;
grid-template-areas: "menu board";
height: 100%;
overflow: hidden;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

#scores {
grid-area: menu;
height: 100%;
}

#board {
grid-area: board;
height: 100%;
width: 100%;
padding: 20px;
box-sizing: border-box;
}

#info {
background: white;
border: 5px solid yellow;
border-radius: 20px;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 20px;
}

#title {
font-family: Calibri, Arial, sans-serif;
font-size: 32px;
margin-bottom: 10px;
}

#image {
flex: 1 1 auto;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
padding: 10px;
}

#img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border: 1px solid red;
}< /code>




Here is the title
Sub title

[img]https://www.popphoto.com/uploads/2022/09/23/Jeff-05-scaled.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/797 ... t-overflow