Максимальная высота адаптивного изображения 100% не работает в Firefox
В настоящее время я пытаюсь изменить размер изображения в зависимости от размеров браузера. Мне удалось изменить размер изображения по горизонтали, если я сужу окно браузера, изображение будет пропорционально изменено. Однако, когда я изменяю размер окна по вертикали, кажется, что Firefox просто не хочет этого делать! Код довольно прост
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
и CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Другая проблема заключается в том, что изображение действительно , кажется, изменяет размер по вертикали в хроме, но мне нужно перетащить нижнюю часть браузера на изображение, прежде чем он начнет это делать. Я бы предпочел, чтобы изображение начало изменяться, как только нижнее заполнение содержимого, так сказать, «попадет» в нижнюю часть изображения. Надеюсь, это имеет смысл.
Любая помощь приветствуется