712 votes

CSS force de redimensionnement et de garder le ratio d'aspect

Je suis en train de travailler avec des images, et j'ai couru à travers un problème de proportions.

<img src="big_image.jpg" width="900" height="600" alt="" />

Comme vous pouvez le voir, height et width sont déjà spécifiées. J'ai ajouté une règle CSS pour les images:

img {
  max-width:500px;
}

Mais pour l' big_image.jpg, je reçois width=500 et height=600. Comment je peux mettre des images redimensionnées, tout en conservant leurs proportions.

911voto

setec Points 1355
img {
    display: block;
    max-width:230px;
    max-height:95px;
    width: auto;
    height: auto;
}

Cela permettra de faire une image shrink si c'est trop gros pour la zone spécifiée (comme à la baisse, il ne sera pas agrandir l'image).

263voto

Aternus Points 135

Je vais examiner l'2 Solutions:

La plus simple

img {
    display: block;
    width: 100% !important;
    height: auto !important;
}

Cette solution indique au navigateur le rendu de l'image avec max en largeur et en régler la hauteur en tant que pourcentage de la largeur.

Amateur

.container {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 34.37% 0 0 0;
}
.container img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

rembourrage: 34.37% 0 0 0;

Ici, vous devez calculer le ratio d'aspect de l'image, par exemple:


 640px (w) = 100%
 220px (h) = ?

 640/220 = 2.909
 100/2.909 = 34.37%

Donc, top padding = 34.37%.

Avec l'amateur solution que vous serez en mesure de recadrer l'image quelle que soit sa taille et ajouter une couleur d'arrière-plan afin de compenser pour le recadrage.

72voto

Hoffmann Points 3585

En arrière-plan, la taille de la propriété est ie>=9 seulement, mais si c'est bien avec vous, vous pouvez utiliser un div avec background-image et définissez background-size: contain:

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Maintenant, vous pouvez simplement mettre votre div de taille de tout ce que vous voulez et pas seulement l'image de maintenir son ratio d'aspect, il sera également centralisé à la fois verticalement et horizontalement à l'intérieur de la div. Il suffit de ne pas oublier de définir les tailles sur le css depuis divs n'ont pas la largeur/hauteur de l'attribut de la balise elle-même.

Cette approche est différente de celle setecs réponse, à l'aide de cette le domaine de l'image sera constante et définie par vous (en laissant des espaces vides, horizontalement ou verticalement, en fonction de la taille de la div et de l'image ratio d'aspect), tandis que setecs réponse, vous obtenez une boîte qui a exactement la taille de l'image à l'échelle (sans espaces vides).

Edit: Selon le MDN fond de taille de documentation , vous pouvez simuler le fond de la taille de la propriété dans IE8 à l'aide d'un propriétaire de filtre déclaration:

Si Internet Explorer 8 ne prend pas en charge en arrière-plan, la taille de la propriété, il est possible d'émuler certaines de ses fonctionnalités à l'aide de la non-standard -ms-fonction de filtre:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

24voto

Dude Points 680

Supprimer la "hauteur" de la propriété.

<img src="big_image.jpg" width="900" alt=""/>

En spécifiant à la fois de vous sont en train de changer le ratio d'aspect de l'image. Il suffit de régler un redimensionner, mais conserver les proportions.

Si vous souhaitez restreindre oversizings:

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

16voto

Marat Tanalin Points 6506

Autant que je sache, il n'existe pas de méthode standard pour prévenir le rapport d'aspect pour les images avec les deux width, height et max-width spécifié.

Nous sommes donc contraints soit de spécifier width et height pour prévenir la page "sauts" pendant le chargement des images, ou utiliser max-width et de ne pas spécifier les dimensions pour les images.

Précisant simplement width (sans height) fait généralement pas beaucoup de sens, mais vous pouvez essayer de remplacer height HTML-attribut par l'ajout d' IMG {height: auto !important; } dans votre feuille de style.

Voir également Firefox bug 392261.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X