web-dev-qa-db-fra.com

Limiter la hauteur d'une image sensible avec css

Mon objectif final est d’avoir un <img> fluide qui ne s'étendra pas au-delà de la hauteur explicitement définie d’un élément parent/grand-parent en utilisant uniquement css. 

Actuellement, je le fais avec une image fluide (max-width:100; height:auto;) normale et javascript en lisant les attributs hauteur/largeur de la balise img, en calculant le rapport de format, en calculant la largeur correcte de l'image à la restriction de hauteur souhaitée et en appliquant cette largeur. en tant que max-width sur l'élément conteneur de l'image. Assez simple, mais j'aimerais pouvoir le faire sans javascript.

height:100%; width:auto; ne fonctionne pas de la même façon que son transverse, et j'ai déjà essayé plusieurs fois avec la boîte matelassée et le positionnement absolu de Unc Dave, mais je devais connaître le rapport de format de l'image à l'avance et ne pouvais donc pas être appliqué à des images ayant les proportions. Donc, l'exigence finale est que le css doit être proportionnel à la taille. 

Je sais, je sais, la réponse à cette question est probablement posée à côté de la ferme de la Licorne, mais je pensais la jeter de toute façon.

cssresponsive-design
35
RobW

L'astuce consiste à ajouter à la fois 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 manière, vous pouvez modifier la largeur spécifiée de .container de la manière souhaitée (200px ou 10% par exemple), et l'image ne sera pas plus grande que ses dimensions naturelles. (Vous pouvez spécifier des pixels au lieu de 100% si vous ne voulez pas vous fier à la taille naturelle de l'image.)

Voici le violon entier: http://jsfiddle.net/KatieK/Su28P/1/

54
KatieK

J'ai défini les 3 styles ci-dessous sur ma balise img

max-height: 500px;
height: 70%;
width: auto;

Ce que cela fait pour l'écran du bureau img ne dépasse pas 500px, mais pour les petits écrans mobiles, il sera réduit à 70% du conteneur extérieur. Fonctionne comme un charme. 

Cela fonctionne également propriété width.

0
JerryGoyal