web-dev-qa-db-fra.com

hauteur maximale ET largeur maximale avec CSS uniquement

Premier post pour moi ici. 

J'utilise un div pour recadrer les vignettes dans les mêmes proportions (180wx170h). Je me bloque lorsque je traite des portraits et des paysages. Si j'utilise ce qui convient aux images de style portrait: 

.crop img {max-height:170px; width:auto}

.. et convient aux images de style paysage:

.crop img {max-width:180px; height: auto;} is fine for landscape style images.

Donc, je veux fondamentalement rogner les côtés si paysage et haut/bas si portrait. Un peu comme une hauteur maximale prioritaire et une largeur maximale.

Je sais que cela pourrait être fait facilement avec PHP mais je ne connais que CSS, alors ce serait ma première préférence.

Je dois conserver le rapport hauteur/largeur de l'image.

cssimage
18
Andy Blanc

Edit 2019: 

Si vous souhaitez conserver les balises <img>, veuillez vous reporter à la propriété object-fit css, sa prise en charge sur les navigateurs est plutôt bonne.

Et si vous souhaitez conserver le rapport de forme lors du changement de largeur, essayez padding-hack .

Si j'ai bien compris, vous avez des blocs de 180x170 px et vous souhaitez les remplir complètement d'images. Essayez de déplacer les images en arrière-plan et utilisez background-size:cover . 

Démo http://jsfiddle.net/heuku/1/

<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>

div {
  width:180px;
  height:170px;
  background-repeat:no-repeat;
  background-size:cover;
}

Notez que cette solution ne fonctionne pas dans IE8 et inférieur.

11
antejan

les solutions après avoir traversé des tonnes d'autres 'solutions'

max-width:100%;
max-height:100%;
height: auto;
width:auto;
44
Nick

Edit: J'ai amélioré la solution, voir ici: https://stackoverflow.com/a/34774905/1663572

J'utilise cette solution que j'ai trouvée lorsque j'essayais de cadrer et de centrer les images sur des carrés (ou autre chose). C'est une combinaison brillante, où vous définissez padding-bottom et height 0 sur son conteneur, ce qui le rend réactif avec un rapport fixe.

Fonctionne dans IE9 et supérieur. Pour IE8 et ci-dessous, quelques hacks CSS sont nécessaires.

HTML

.container {
    height: 0;
    padding-bottom: 100%; /* Or 75% for 4:3 aspect ratio */
    position: relative;
    overflow: hidden;
}
.container img {
    display: inline-block;
    max-width: 90%; /* You can use different numbers for max-width and max-height! */
    max-height: 75%;
    width: auto;
    height: auto;

    position: absolute;
    left: 50%; /* This sets left top corner of the image to the center of the block... */
    top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
    -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* Fallback for IE8 */
@media all\0 { 
    .container img {
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

Essayez-le ici: http://jsfiddle.net/thiemeljiri/uhdm4fce/4/

Remarque: Si vous utilisez bootstrap, changez la classe .container en quelque chose d'autre.

2
actimel

Tu pourrais essayer

.crop img {max-height:170px; max-width:180px;}

Puisque max-height et max-width sont maxima, cela devrait fonctionner. Le navigateur rendra l'image la plus grande possible, sans dépasser vos dimensions.

Notez que ceci n’a pas été testé, mais repose sur cette page W3Schools .

J'espère que cela t'aides!!

1
ameed

C'est peut-être un peu tard, mais j'ai trouvé que l'encapsulation de ladite image dans <figure> met à l'échelle l'image en conservant les proportions. 

0
YS Chung

Vous avez la réponse en vous!

Essayer:

.crop img {max-height: 170px; max-width: 180px;}
0
Praveen Kumar Purushothaman