Ajustement des images à l'écran

Question

J'ai créé une galerie d'images composée de deux rangées d'images arborescentes. J'ai rendu mon site réactif, mais pour une raison quelconque, les images ne sont pas redimensionnées/ajustées en fonction de l'écran. J'ai joint l'image, et comme il est visible les images ne s'ajustent pas à l'écran. Screen shot of site

.image3 { 
 
    height: 300px; 
 
    width: 370px; 
 
    border: 5px solid; 
 
    color: grey; 
 
}

<div class="wrapper"> 
 
    <div class="row"> 
 
    <img src="img/gallery1.jpg" alt="Iphone" class="image3"> 
 
    <img src="img/static1.squarespace2.jpg" alt="Iphone" class="image3"> 
 
    <img src="img/apple-iphone-8.jpg" alt="Iphone" class="image3"> 
 
    </div> 
 
    <div class="row"> 
 
    <img src="img/iphone-8-concept.jpg" alt="Iphone" class="image3"> 
 
    <img src="img/gallery1.jpg" alt="Iphone" class="image3"> 
 
    <img src="img/gallery1.jpg" alt="Iphone" class="image3"> 
 
    </div> 
 
</div>

Answer 1

Pourquoi seraient-ils?

Vous pouvez utiliser

max-width: 100%; /* or 33% or whatever you need */ 

de le laisser rétrécir lorsque l'écran est moins large, mais maintenant ce sera toujours la taille que vous avez spécifié.

---

aussi « réactivité » se réfère principalement à avoir différentes dispositions pour différentes largeurs d'écran, ce qui entraîne configurations optimisées pour les mobiles et les ordinateurs. Avoir trois images côte à côte ne semble pas très réactif. Je diminuerais plutôt le nombre d'images dans chaque rangée.

Comme ceci:

.image3 { 
 
    height: 300px; 
 
    width: 370px; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    color: grey; 
 
}

<div class="row"> 
 
    <div class="wrapper"> 
 
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" /> 
 
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" /> 
 
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" /> 
 
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" /> 
 
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" /> 
 
    <img src="http://www.placecage.com/200/200" alt="Iphone" class="image3" /> 
 
    </div> 
 
</div>

Answer 2

L'image ne redimensionne pas parce que vous leur avez donné une largeur absolue. Si vous donnez à l'élément max-width et max-height de 100%, il devrait être réactif. Donc, comme ceci:

.image3 { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    color: grey; 
 
}

<div class="row"> 
 
    <div class="wrapper"> 
 
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" /> 
 
    <img src="img/static1.squarespace2.jpg" alt="Iphone" class="image3" /> 
 
    <img src="img/apple-iphone-8.jpg" alt="Iphone" class="image3" /> 
 
    </div> 
 

 

 
    <div class="row"> 
 

 
    <img src="img/iphone-8-concept.jpg" alt="Iphone" class="image3" /> 
 
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" /> 
 
    <img src="img/gallery1.jpg" alt="Iphone" class="image3" /> 
 

 
    </div>

pixels ne sont pas sensibles à la taille de l'écran

Note: Voir la réponse de Marioz ci-dessous

Answer 3

Il semble que vous donner un fixe taille à vos images en utilisant px unités. Si vous voulez que vos images soient réactives, pour adapter leur taille, vous devez utiliser des unités relatives. Étant le plus commun:

• par rapport au contenant: percentaje %
• Par rapport à la taille de police du conteneur: em
• Par rapport à la taille de police de l'élément racine: rem
• Par rapport à la taille de la fenêtre d'affichage: vw et vh (équivalent à 1% de la vue de la fenêtre

Vous devez envelopper chaque image dans un div individuel class:wrapper et lui donner une largeur relative.

html,body { 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.image3 { 
 
    display:block; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    width:100%; 
 
    border-style: solid; 
 
    border-width: 5px; 
 
    color: grey; 
 
} 
 

 
.row { 
 
    width:100%; 
 
} 
 

 
.wrapper { 
 
    width: 33.33%; 
 
    float:left; 
 
}

<div class="row"> 
 
    <div class="wrapper"> 
 
    <img src="https://placeimg.com/80/80/any" alt="Iphone" class="image3" /> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <img src="https://placeimg.com/120/120/any" alt="Iphone" class="image3" /> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <img src="https://placeimg.com/100/100/any" alt="Iphone" class="image3" /> 
 
    </div> 
 
</div> 
 

 

 
<div class="row"> 
 
    <div class="wrapper"> 
 
    <img src="https://placeimg.com/80/80/any" alt="Iphone" class="image3" /> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <img src="https://placeimg.com/120/120/any" alt="Iphone" class="image3" /> 
 
    </div> 
 
    <div class="wrapper"> 
 
    <img src="https://placeimg.com/100/100/any" alt="Iphone" class="image3" /> 
 
    </div> 
 
</div>

Peut-être que c'est une bonne idée d'utiliser FlexBox css ou grille aussi.

Answer 4

utilisez ce code. ici j'ai utilisé bootstrap ... copier le code entier .. et enregistrer comme page.html puis vérifier.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
<div class="row"> 
    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4"> 
    <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive"> 
</div> 

    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4"> 
    <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive"> 
    </div> 

    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4"> 
    <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive"> 
    </div> 

</div> 

    <div class="row"> 
    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4"> 
     <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive"> 
    </div> 

    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4"> 
    <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive"> 
    </div> 

    <div class="col-lg-4 col-sm-4 col-md-4 col-xs-4"> 
    <img src="http://lorempixel.com/400/200/sports/" alt="" class="img-responsive"> 
    </div> 
    </div> 
    </div> 

    </body> 
</html> 

Answer 5

Si vous voulez une image à répondre il y a 2 choses principales que vous devez faire:

1. jamais mis à la fois la largeur et la hauteur, la largeur juste réglée.
2. ne pas utiliser des pixels pour définir l'utilisation de la largeur pourcentages

Dans votre cas, vous avez 3 images diviser de façon à 100% en 3 qui est d'environ 33%, donc donner les images de la taille de 33% (ou un peu moins si le conteneur n'a pas de taille de boîte: border-box;) et ils s'ajusteront bien.