Как сделать так, чтобы мой имидж становился все меньше и меньше?

Question

Когда размер моего браузера меньше 950 пикселей, мое основное изображение перестает уменьшаться и начинает скрываться за окном браузера. Я попытался изменить ширину, но я начинаю видеть свой цвет фона. Почему это так и как я могу это исправить?

Это мой Codepen И часть моего кода:

#image {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: auto;
border-bottom: 1px solid #ed1c24;
object-fit: cover;

}

Кстати, я не знаю, принято ли здесь или нет (а если нет, просто скажите мне) задавать два вопроса в одном посте, я не знаю, почему мои СМИ перестают отвечать, и когда я получаю до 830 пикселей, ничего не меняется. Это сработало как две минуты назад.

Спасибо всем

Answer 1

Установите это на #image:

height: auto;

А у вас отсутствует скобка при первом медиа-запросе (строка 189), поэтому остальные не работают.

Кроме того, верхний, нижний, левый и правый значения не действуют, если положение установлено относительно.

РЕДАКТИРОВАТЬ: я играл с некоторыми другими элементами в вашем Codepen. Это должно быть ближе к тому, что вы хотите: https://codepen.io/anon/pen/OZEOdW?editors=1100 По крайней мере, вы можете сравнить его с вашей версией, может быть полезно:)