Изображение искажается при изменении размера окна (CSS)

Question

Итак, я пытался создать простую страницу, где изображение занимает 100% высоты, с небольшой боковой панелью.Я хочу, чтобы изображение само менялось при изменении размера окна.Когда я изменяю размер окна по вертикали, ширина остается неизменной, что не то, что я хочу (я хочу, чтобы оно сохраняло соотношение сторон независимо от размера окна).Мне действительно не нравится это искажение, но я не уверен, как это исправить.Есть идеи, что я делаю не так?

.big-image {
    max-height: 100%;
    min-width: 20%;
    margin: auto;
    overflow: hidden;
}

Answer 1

max-width:100% и height:auto будут работать.При применении max-width: 1000%;это займет ширину контейнера, а высота будет пропорционально изменена.

Answer 2

установите display: block или display: inline-block в свой класс .big-image, чтобы свойство max-height и min-width работало.Эти свойства вместе с height, width, min-height, max-width, padding-top, padding-bottom, margin-top и margin-bottom не работают на встроенных элементах.

Answer 3

Вы можете установить height или width изображения на auto и управлять другим свойством с установленным размером, будь то в процентах или в пикселях.Что auto должно поддерживать соотношение сторон изображения, в то время как вы можете управлять размером изображения с другим свойством.