CSS: largeur ou hauteur 100% tout en conservant le rapport hauteur / largeur?


174

Actuellement, avec STYLE, je peux utiliser width: 100%et autosur la hauteur (ou vice versa), mais je ne peux toujours pas contraindre l'image dans une position spécifique, soit trop large ou trop haute, respectivement.

Des idées?


3
pouvez-vous publier un lien ou une capture d'écran pour montrer un exemple du problème?
Mauro

Réponses:


138

Si vous ne définissez qu'une seule dimension sur une image, le rapport hauteur / largeur de l'image sera toujours conservé.

Le problème est-il que l'image est plus grande / plus haute que vous préférez?

Vous pouvez le placer dans un DIV défini sur la hauteur / largeur maximale souhaitée pour l'image, puis définir overflow: hidden. Cela recadrerait tout ce que vous voulez.

Si une image est 100% large et hauteur: auto et que vous pensez qu'elle est trop haute, c'est précisément parce que le rapport hauteur / largeur est préservé. Vous devrez recadrer ou modifier le rapport hauteur / largeur.

Veuillez fournir plus d'informations sur ce que vous essayez d'accomplir et j'essaierai de vous aider davantage!

--- MODIFIER EN FONCTION DE LA RÉTROACTION ---

Connaissez-vous les propriétés max-width et max-height ? Vous pouvez toujours les définir à la place. Si vous ne définissez aucun minimum et que vous définissez une hauteur et une largeur maximales, votre image ne sera pas déformée (le rapport hauteur / largeur sera préservé) et ne sera pas plus grande que la dimension la plus longue et atteindra son maximum.


16
si l'image est plus haute que large, j'utiliserais height = 100% et width = auto, si l'image est plus large que haute, j'utiliserais width = 100%, height = auto. je ne sais simplement jamais quel est le cas? le recadrage par hauteur / largeur maximale fonctionnerait - mais s'il y a un moyen de ne pas - je préférerais l'utiliser ...
Weston Watson

2
Eh bien, concevez-vous une mise en page fluide ou à largeur fixe? Si vous êtes dans une mise en page à largeur fixe, vous pouvez toujours définir votre largeur à 100% et l'image sera mise à l'échelle de manière appropriée, mais elle peut être très haute. Essayez-vous de positionner une image dans un bloc de texte, ou de l'utiliser comme bannière ou comme arrière-plan? Si vous pouviez montrer la page où vous prévoyez de l'utiliser ou décrire le contexte, je pourrais vous aider davantage. Voir également les modifications ci-dessus.
Andrew

l'utilisation de max-height sur mon img m'a permis de contraindre les images tout en conservant leur rapport hauteur / largeur
northamerican

2
object-fitpas d'Utilisation?
LeeGee

77

Quelques années plus tard, à la recherche de la même exigence, j'ai trouvé une option CSS utilisant background-size.

Il est censé fonctionner dans les navigateurs modernes (IE9 +).

<div id="container" style="background-image:url(myimage.png)">
</div>

Et le style:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Le référence: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Et la démo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size


3
la solution idéale, qui n'est malheureusement pas prise en charge par IE8 :(
japrescott

C'est la solution idéale, mais si vous faites cela dans des carrousels, les images deviennent vierges pendant une seconde après chaque diapositive.
kloddant

58

En définissant la max-widthpropriété CSS sur 100%, une image remplira la largeur de son élément parent, mais ne sera pas rendue plus grande que sa taille réelle, préservant ainsi la résolution.

La définition de la heightpropriété sur autoconserve le rapport hauteur / largeur de l'image, l'utilisation de cette technique permet de remplacer la hauteur statique et permet à l'image de fléchir proportionnellement dans toutes les directions.

img {
    max-width: 100%;
    height: auto;      
}

1
mais la mise heightà autocause refusion lorsque l' image est flottante
Gregory Pakosz

42

Solution de travail simple et élégante:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

3
Merci de me le rappeler object-fit. Exactement ce dont j'avais besoin.
Ash Clarke

5
C'est une solution idéale, mais malheureusement elle object-fitn'est prise en charge dans aucune version d'IE ni d'Edge à partir du 28 mars 2017.
Simon G

2
Depuis mars 2019, cette fonctionnalité est prise en charge à 90% - cela devrait donc être considéré comme la bonne réponse.
Hampus Ahlgren

Notez également que object-fit: containet que vous object-fit: covern'aimez pas width100% - vous devriez utiliser des unités en béton commepx
FlameStorm

J'ai essayé object-fitavec max-widthet max-heightcomme utilisé dans d'autres réponses, mais cela n'a pas fonctionné. cela fonctionne parfaitement pour les tailles d'image aléatoires même avec widthetheight 100%
Halfacht

27

Eu le même problème. Le problème pour moi était que la propriété height était également déjà définie ailleurs, corrigée comme ceci:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

Exactement ce que je cherchais. Merci un million de mec.
London Smith

Parfait là où la taille de l'image peut être plus petite ou plus grande que le div parent, et elle sera redimensionnée en un centre parfait avec une largeur maximale OU une hauteur maximale. Vous n'êtes pas obligé d'utiliser l'image comme arrière-plan qui ne fera que surcharger le parent s'il est réglé sur "cover".
Rehmat

9

Solution simple:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

En passant, si vous souhaitez le centrer dans un conteneur div parent, vous pouvez ajouter ces propriétés css:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Cela devrait vraiment fonctionner comme prévu :)


a voté pour la première partie. la deuxième partie n'a pas fonctionné pour moi ... :(
Vikas Bansal

Juste un problème - si l'image est plus grande que 100% du conteneur, elle se répandra et nécessitera des barres de défilement ou un recadrage. Je ne sais pas comment obtenir la même chose tout en limitant la taille maximale du conteneur. Si vous définissez la largeur et la hauteur maximales, cela ne préserve plus le rapport hauteur / largeur.
JustAMartin

5

L'une des réponses comprend la taille de fond: contenir instruction contain css que j'aime beaucoup car c'est une déclaration simple de ce que vous voulez faire et le navigateur le fait simplement.

Malheureusement, tôt ou tard, vous devrez appliquer une ombre qui ne fonctionnera malheureusement pas bien avec les solutions d'image d'arrière-plan.

Disons que vous avez un conteneur qui est réactif mais qui a des limites bien définies pour la largeur et la hauteur min et max.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

Et le conteneur a une image qui doit être consciente des pixels de la hauteur du conteneur afin d'éviter d'obtenir une image très haute qui déborde ou est rognée.

L'img doit également définir une largeur maximale de 100% afin d'abord de permettre le rendu de plus petites largeurs et d'autre part d'être basé sur un pourcentage, ce qui le rend paramétrique.

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Notez qu'il a une belle ombre;)

Profitez d'un exemple en direct sur ce violon: http://jsfiddle.net/pligor/gx8qthqL/2/


Cheers - exactement ce que je cherchais.
Eli

Merci pour ces solutions et lien jsdfiddle. Cela a fonctionné pour ma galerie d'images de réaction où j'utilise les deux: des images avec une plus grande hauteur et des images avec une plus grande largeur. :)
Eugenijus S.

4

Je l'utilise pour un conteneur rectangulaire avec une hauteur et une largeur fixes, mais avec des images de tailles différentes.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

3

Il est préférable d'utiliser auto sur la dimension qui doit respecter le rapport hauteur / largeur. Si vous ne définissez pas l'autre propriété sur auto, la plupart des navigateurs supposeront de nos jours que vous voulez respecter le rapport d'aspect, mais pas tous (IE10 sur Windows Phone 8 ne le fait pas, par exemple)

width: 100%;
height: auto;

2

C'est une solution très simple que j'ai trouvée après avoir suivi le lien de conca et examiné la taille de l'arrière-plan. Il fait sauter l'image vers le haut, puis la place au centre du conteneur extérieur sans la mettre à l'échelle.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

Bonne solution intelligente! Avec les 40% supplémentaires, vous compensez le rapport hauteur / largeur. Merci!
Sascha le

Vous pouvez également simplement utiliser background-size: contain;pour adapter l'image dans un arrière-plan.
Simon G

1

Pas pour sauter dans un vieux problème, mais ...

#container img {
      max-width:100%;
      height:auto !important;
}

Même si ce n'est pas correct car vous utilisez le remplacement important de la hauteur, si vous utilisez un CMS comme WordPress qui définit la hauteur et la largeur pour vous, cela fonctionne bien.


1

De nos jours , on peut utiliser vwet les vhunités, ce qui représente 1% du v iewport a w idth et h huit , respectivement.

https://css-tricks.com/fun-viewport-units/

Ainsi, par exemple:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... rendra l'image aussi large que possible, en conservant le rapport hauteur / largeur, mais sans être plus large ou plus haut que 100% de la fenêtre.


0

Utilisez JQuery ou quelque chose comme ça, car CSS est une idée fausse générale (les innombrables questions et discussions ici sur les objectifs de conception simples le montrent).

Il n'est pas possible avec CSS de faire ce que vous semblez souhaiter: l'image doit avoir une largeur de 100%, mais si cette largeur entraîne une hauteur trop grande, une hauteur maximale doit s'appliquer - et bien sûr les proportions correctes doivent être conservé.


-2

Je pense que c'est ce que vous cherchez, je le cherchais moi-même, mais je m'en suis souvenu à nouveau avant de trouver le code.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

l'évolution numérique est en marche.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.