Comment réduire la largeur de l'image

Question

Je voudrais savoir comment redimensionner l'image trouvée dans cette section lorsque la largeur de l'écran diminue. L'image fait partie de l'effet de parallaxe, mais ce n'est pas l'arrière-plan, c'est la chose qui fait défiler (que je trouve habituellement comme un texte).

<div class="bgimg-1 w3-display-container" id="home"> 
    <div class="w3-display-middle" style="white-space:nowrap;"> 
    <img src="logo3.png" alt="Logo" style="width:1000px;height:750px;"> 
    </div> 
</div> 

Je fixe les dimensions avec le style , mais ont besoin de réduire davantage en cas de besoin. Au début du code entier, avant cet article, l'option dont je dispose est

@media only screen and (max-device-width: 1024px) { 
.bgimg-1, .bgimg-2, .bgimg-3 { 
    background-attachment: scroll; 
} 
} 

qui ne tourne au large défilement parallaxe pour les petites largeurs. Les références aux images trouvées dans cette partie sont les images d'arrière-plan, que je n'ai pas besoin de redimensionner. Que dois-je inclure pour redimensionner l'image dans la section mentionnée plus haut (pas les arrière-plans)?

Answer 1

Si vous utilisez Bootstrap, Materialize ou tout autre modèle CSS réactif, laissez simplement votre image dans sa résolution d'origine et placez son tag dans un conteneur réactif. Avec Bootstrap, où chaque vue est divisé en 12 colonnes, il ressemblerait à ceci:

<div class="row"> 
    <div class="col-sm-6 col-offset-3"> 
     <img src="logo3.png" alt="Logo" /> 
    </div> 
</div> 

Permettez-moi savoir si vous voulez quelque chose de différent de ce.