J'ai le catalogue de 6 images. Je les montre en 1 rangée. Sur des écrans plus volumineux, les 6 photos sont correctement, mais lorsque je change de largeur d'écran sur la taille de la tablette de la taille mobile, des coupes d'image en deux.
Le comportement que je veux, c'est que, afficher toutes les 6 images sur l'écran plus grand, mais dès que la taille de la fenêtre utilisateur, seule la photo pouvant être affichée complètement dans ce spectacle de taille d'écran particulière, et d'autres devraient se cacher. En ce moment, j'utilise un débordement: caché et conteneur de taille fixe.
Vous trouverez ci-dessous certaines captures d'écran pour montrer le problème,
3 Réponses :
Utiliser ou Vous pouvez l'utiliser n Votre feuille de style comme Essayez également d'utiliser largeur: 100% sur IMG Tag dans html Objectfit: contenir si vous img a une largeur de hauteur < / p>
Probablement veut simplement envelopper sur le conteneur, ne pas modifier la taille et la mise à l'échelle de l'image.
Puis cible qu'en conséquence, comme .Container img {largeur: 100%;}
Et aussi pourquoi utilisez-vous Overflow caché?
La question est trop générale mais je pense que ce serait un échantillon pour celui-ci.
Ajouter ci-dessous des styles aux images de Div Wraps. P>
img {
height: 100%;
width: auto;
// optional
margin-right: 50px;
margin-top: 50px;
}
Voici la solution élargie d'Amir Mahdi Digbari en action.
Vous pouvez obtenir la même chose avec la grille CSS mais Flexbox est suffisamment bonne pour cela. p>
p>
<div class="container">
<div class="wrapper">
<div class="img">Img1</div>
<div class="img">Img2</div>
<div class="img">Img3</div>
<div class="img">Img4</div>
<div class="img">Img5</div>
<div class="img">Img6</div>
</div>
</div>
Donnez le code HTML pour voir la manière dont vous avez implémentées, utilisez la requête d'écran multimédia dans votre SASS ou CSS.
Cependant, ce n'est pas une question et une préoccupation rares, et je suis sûr que cela pourrait être répondu, @fussionweb est correct, vous devez fournir un échantillon de code démontrant ce que vous avez fait et cela reproduit ce problème.