Supposons que j'ai le code suivant:
p>
img {
width: 100%;
height: 100%;
object-fit: contain;
}
4 Réponses :
Faites ceci:
<div class="fit"> <img src="https://placehold.it/500x750"> </div> <div class="fit"> <img src="https://placehold.it/50x100"> </div> <div class="normal"> <img src="https://placehold.it/75x10"> </div> <div class="normal"> <img src="https://placehold.it/10x75"> </div> <div class="land"> <img src="https://placehold.it/75x10"> </div> <div class="port"> <img src="https://placehold.it/10x75"> </div>
Merci pour ton aide. Le problème avec Hauteur: auto est qu'il n'empêche pas l'image d'être supérieure à celle du div . Si j'ai une image de taille 500 * 800 par exemple, la largeur sera de 100% à 500px et la hauteur automatique de 800px. Dans ce cas, la hauteur doit être de 100% et la largeur automatique.
@Arrerob Vous pouvez définir une hauteur à 100% si vous voulez, mais peu importe quoi, la plus grande dimension sera remplie d'abord - l'autre déformera alors
Hauteur: AUTO n'est pas nécessaire sauf si réglé ailleurs et doit être réinitialisé. En outre, si l'image est un paysage, il ne couvrira pas la partie inférieure, s'il s'agit d'un portrait, il déborde de déborder. L'objet-ajustement semble être un bon compromis et permet de choisir comment couper l'image si ce n'est pas un carré;) développeur.mozilla.org/en-us/docs/web/css/Object-fit et développeur.mozilla.org/en-us/docs/web/css/Object-position Pour tester le compromis pour l'image qui ne sont pas carrés
@ G-cyr true. Je suppose que je l'ajoute toujours comme une précaution. Je suis d'accord avec l'objet-Fit aussi. J'ai mis à jour mon code pour montrer comment les images réagissent réellement avec hauteur: 100%
Je suppose que l'op doit faire un compromis quelque part. clip image ou utiliser uniquement des images carrées;)
Tout à fait. Je pense que c'est vraiment le noeud de cette question ... il faut un compromis
@ G-Cyr J'ai mis à jour la réponse à inclure objet-ajustement pour le compromis. En tant que mise en garde: l'ajustement de l'objet ne fonctionne pas dans IE11 et il n'a que img support dans le bord 16 et plus
Le objet-ajustement fonctionne en effet. J'essayais de l'utiliser avec max-largeur et max-hauteur , c'est pourquoi il ne pouvait pas fonctionner.
<div width="500" height="500">
<img src="https://placehold.it/250/150">
</div>Depuis que vous avez participé au code de ma réponse, comment cela se différera-t-il de ce que j'ai déjà répondu? Et votre code ne fonctionne pas.
Merci pour votre réponse mais Objet-Fit: Couverture; ne semble pas changer quoi que ce soit.
Vous devez expliquer un peu plus l'utilisation de l'objet, il me semble le meilleur compromis ici;)
Je pense que vous avez répondu à votre propre question!
Vous avez un div! => largeur: 500px et hauteur: 500px!
Lorsqu'une image est supérieure à cette taille, max-largeur et max-hauteur peuvent fonctionner correctement!
Mais lorsque votre image est plus petite, max-largeur ne peut pas vous aider, car la largeur de l'image est inférieure à 500px!
Par exemple, vous avez une image => largeur: 300px. Max-largeur: 100% est égal à 300PX!
Ensuite, vous pouvez modifier votre code comme celui-ci: mais si vous voulez une image réactive:
Vous pouvez utiliser la règle de la taille de l'arrière-plan CSS si vous mettez votre image à l'arrière-plan:
Je dois utiliser parce que j'utilise une carte sur elle. Merci quand même pour la réponse!
Supprimer
max-largeur etmax-hauteur - c'est essentiellement dire max-largeur de l'image d'origine. Faites celargeur: 100%; Hauteur: auto; Cela rendra l'image 100% largeur de tout conteneur qu'il est dans, mais ne pas déformer l'image verticalement