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

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?

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.

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

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;      
}

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%);
}

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;
}

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 :)

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/

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;
}

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;

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); />

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.

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.

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é.

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.