CSS: 100% largeur ou hauteur tout en conservant les proportions?

Question

Actuellement, avec STYLE, je peux utiliser "width: 100%" et "auto" sur la hauteur (ou vice versa) ...

mais je ne peux toujours pas contraindre l'image dans une position spécifique, que ce soit trop large ou trop haut, respectivement ...

des idées?

Answer 1

Si vous ne définissez une dimension sur une image, le format de l'image sera toujours préservé.

Le problème est que l'image est plus grand/plus grand que vous préférez?

Vous pourriez le mettre dans une DIV qui est réglé au maximum de la hauteur/largeur que vous voulez pour l'image, puis définissez overflow:hidden. Qui serait des cultures au-delà de ce que vous voulez.

Si une image est 100% de largeur et height:auto et que vous pensez qu'il est trop haut, c'est précisément parce que les proportions sont conservées. Vous aurez besoin de culture, ou de changer le ratio d'aspect.

Veuillez fournir plus d'informations sur ce que vous êtes précisément en essayant de faire et je vais essayer d'aider de plus en plus!

--- EDIT SUR LA BASE DES COMMENTAIRES ---

Êtes-vous familier avec le max-width et max-height propriétés? Vous pouvez toujours mettre à la place. Si vous n'avez pas atteint un minimum, et vous donnez un max de hauteur et de largeur, alors votre image ne sera pas déformée (proportions seront conservées) et il ne sera pas plus importante que selon la dimension est le plus long et atteint son max.

Answer 2

Quelques années plus tard, à la recherche de la même exigence, j'ai trouvé un CSS à l'aide de fond de taille.

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

La 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

Answer 3

En définissant la propriété CSS max-width sur 100% , une image remplira la largeur de son élément parent, mais ne restituera pas une taille supérieure à sa taille réelle, préservant ainsi la résolution.

Définir la propriété height sur auto maintient le rapport de format de l'image. Cette technique permet de remplacer la hauteur statique et de permettre une flexion proportionnelle de l'image dans toutes les directions.

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

Answer 4

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

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

Answer 5

Il est préférable d’utiliser auto sur la dimension qui doit respecter les proportions. Si vous ne définissez pas l'autre propriété sur auto, la plupart des navigateurs supposent aujourd'hui que vous souhaitez respecter le rapport hauteur / largeur, mais pas tous (IE10 sur Windows Phone 8 ne le fait pas, par exemple).

 width: 100%;
height: auto;