Comment faire en sorte que mon image continue à se réduire de manière réactive ?

Question

Lorsque la taille de mon navigateur est inférieure à 950px, mon image principale cesse de se réduire et commence à se cacher derrière la fenêtre du navigateur. J'ai essayé de modifier la largeur, mais je commence alors à voir ma couleur d'arrière-plan. Pourquoi et comment puis-je y remédier ?

C'est mon Codepen Et une partie de mon code :

#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;

}

Au fait, je ne sais pas si c'est la coutume ici ou pas (et si non, dites-le moi) de poser deux questions dans un seul post, je ne sais pas pourquoi mes médias s'arrêtent de répondre, et quand je passe à 830px, rien ne change. Ça marchait il y a deux minutes.

Merci à tous

Answer 1

Placez ceci sur l'image :

height: auto;

Et il manque une parenthèse à la première media query (ligne 189), c'est pourquoi les autres ne fonctionnent pas.

De même, les options haut, bas, gauche et droite n'ont aucun effet lorsque la position est définie comme relative.

EDIT : J'ai joué avec d'autres éléments dans votre Codepen. Cela devrait être plus proche de ce que vous voulez : https://codepen.io/anon/pen/OZEOdW?editors=1100 Au moins vous pouvez la comparer à votre version, cela pourrait être utile :)