Faire une image échelle vers le bas lorsque la fenêtre redimensionne

Question

Salut les gars j'ai une image de fond mis en arrière-plan et je veux en sorte que lorsque l'utilisateur réduit l'échelle de la fenêtre, il redimensionne avec elle:

HTML:

<div class="parallax"> 
    </div> 

CSS:

.parallax { 
    background-image: url("../Images/back1.jpg"); 
    min-height: 700px; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    padding: 100px 20px; 
} 

Je l'ai à travailler quand je l'ai changé background-size: cover; to contain, mais il découpe une partie de l'image de la gauche et à droite.

Fiddle Lien: here

Merci

Answer 1

Le code ci-dessous rend l'image d'arrière-plan également sensible lorsqu'un window est resized. J'ai mis à jour votre code, retiré min-height et fond fixed et fait le pourcentage padding en haut et en bas.

.parallax { 
 
    background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center/cover; 
 
    padding: 30% 0; 
 
}

<div class="parallax"> 
 
</div>

Answer 2

En plus de mes commentaires, voici ce que je l'ai écrit dans le dernier commentaire - une étiquette img régulière avec width: 100% et height: auto au lieu d'un background-image:

img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div> 
 
    <img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg"> 
 
</div>