Limiter la hauteur d'une image réactive avec css
Mon objectif final est d'avoir un fluide <img> qui ne s'étendra pas au-delà d'une hauteur explicitement définie d'un élément parent / grand-parent en utilisant uniquement css.
Actuellement, je le fais avec une image fluide normale (max-width:100; height:auto;) et javascript en lisant les attributs height/width de la balise img, en calculant le rapport d'aspect, en calculant la largeur correcte de l'image à la restriction de hauteur désirée, et en appliquant cette largeur en tant que max-width sur l'élément conteneur de l'image. Assez simple, mais j'aimerais être capable de le faire sans javascript.
height:100%; width:auto; ne fonctionne pas de la même manière que sa transversale, et j'ai fait quelques tentatives avec la boîte rembourrée D'UNC Dave et le positionnement absolu de cette fonction, mais nécessite de connaître le rapport d'aspect de l'image à l'avance et ne peut donc pas être appliqué sur des images qui ont des proportions différentes. Donc, l'exigence finale est que le css doit être indépendant de la proportion.
Je sais, je sais, la réponse à cette question est probablement assise à côté de la ferme de licorne, mais je pensais le jeter là-bas de toute façon.
3 réponses
, L'astuce est d'ajouter deux max-height: 100%; et max-width: 100%; à .container img. Exemple CSS:
.container {
width: 300px;
border: dashed blue 1px;
}
.container img {
max-height: 100%;
max-width: 100%;
}
De cette façon, vous pouvez faire varier la largeur spécifiée de .container de la manière que vous voulez (200px ou 10% par exemple), et l'image ne sera pas plus grande que ses dimensions naturelles. (Vous pouvez spécifier pixels au lieu de 100% si vous ne voulez pas compter sur la taille naturelle de l'image.)
Voici tout le violon: http://jsfiddle.net/KatieK/Su28P/1/
J'ai défini les 3 styles ci-dessous sur ma balise img
max-height: 500px;
height: 70%;
width: auto;
Ce qu'il fait que pour l'écran de bureau img ne se développe pas au-delà de 500px mais pour les petits écrans mobiles, il rétrécira à 70% du conteneur externe. Fonctionne comme un charme.
Cela fonctionne également width propriété.
Vous pouvez utiliser le style en ligne pour limiter la hauteur:
<img src="" class="img-responsive" alt="" style="max-height: 400px;">