web-dev-qa-db-fra.com

Rendre toutes les photos carrées via css

J'essaie de transformer une série de photos en photos carrées. Ils peuvent être rectangulaires horizontalement (c'est-à-dire 600x400) ou verticalement (400x600), mais je veux qu'ils soient 175x175 de toute façon. Ma pensée était de maximiser la hauteur ou la largeur maximale du petit côté et de ne pas permettre un débordement au-delà de 175 pixels sur le plus grand côté ... cependant, j'ai des problèmes avec cela.

Est-ce possible avec css?

Ci-dessous est ma tentative, mais elle donne toujours des rectangles:

<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>
imagecssshape
16
user749798

Vous pouvez définir la largeur/hauteur du div parent, puis définir la balise img enfant sur width: 100%; hauteur: auto;

Cela réduira l'image pour essayer d'adapter le parent avec le rapport d'aspect à l'esprit.

Vous pouvez également définir l'image comme image d'arrière-plan sur le div. Ensuite, si vous pouvez utiliser css3, vous pouvez jouer avec la propriété background-size. Ses attributs sont: contenir, couvrir ou une hauteur spécifique (50%, 50%) (175px, 175px) Vous pouvez également essayer de centrer l'image avec la position d'arrière-plan

<div style="background-image:url(some.png); background-size: cover; background-position: 50%">
25
Jesse

D'accord, j'ai compris.

Je ne sais pas s'il est trop tard ou quoi, mais j'ai trouvé une manière 100% CSS pure de créer des vignettes carrées. C'est quelque chose que j'essaie de trouver une solution depuis un bon moment et que je n'ai pas eu de chance. Avec une certaine expérimentation, je l'ai fait fonctionner. Les deux principaux attributs à utiliser sont OVERFLOW: HIDDEN et WIDTH/HEIGHT: AUTO.

Bon, voici ce qu'il faut faire:

Disons que vous avez un lot d'images de formes et de tailles variées, du paysage, du portrait, mais tous, bien sûr, rectangulaires. La première chose à faire est de classer les liens d'image (miniatures) en mode portrait ou paysage, à l'aide d'un sélecteur de classe. D'accord, disons que vous voulez simplement créer deux miniatures, pour simplifier les choses. vous avez:

img1.jpg (portrait) et img2.jpg (paysage)

Pour HTML, cela ressemblerait à ceci:

<a class="portrait" href="yoursite/yourimages/img1.jpg"><img src="yoursite/yourimages/img1.jpg /></a>
<a class="landscape" href="yoursite/yourimages/img2.jpg"><img src="yoursite/yourimages/img2.jpg /></a>

Donc, à ce stade, car il n'y a pas encore de CSS, le code ci-dessus vous donnera votre image en taille réelle sous forme de miniature qui serait liée à la même image en taille réelle. À droite, voici donc le CSS pour le portrait et le paysage. Il y a deux déclarations pour chacune (le lien et l'image du lien):

.landscape {
        float:left;
        width:175px;     
        height:175px;    
        overflow:hidden;    
    }

.landscape  img{
        width:auto;
        height: 175px;   
    }

.portrait {
        float:left;
        width:175px;
        height:175px;
        overflow:hidden;    
    }

.portrait img {
        width:175px;    <-- notice these
        height: auto;   <-- have switched
    }

Les choses les plus importantes sont la largeur et la hauteur et le trop-plein: caché. Float left n'est pas nécessaire pour que cela fonctionne.

Dans la déclaration de vignette de paysage (.landscape), le cadre de sélection est défini sur 175 x 175 et le débordement est défini sur masqué. Cela signifie que toute information visuelle plus grande que celle contenant un carré de 175 pixels sera masquée.

Pour la déclaration d'image de paysage (.landscape img), la hauteur est fixée à 175 px, ce qui redimensionne la hauteur d'origine et la largeur est définie sur auto, ce qui redimensionne la largeur d'origine, mais uniquement au point de se rapporter au carré de délimitation, qui dans ce cas, 175px. Ainsi, plutôt que d'étaler la largeur vers le bas dans le carré, il remplit simplement le carré, puis toute information visuelle supplémentaire dans la largeur (c'est-à-dire le débordement) est cachée avec le débordement: caché.

Cela fonctionne de la même manière pour le portrait, seulement que la largeur et la hauteur sont commutées, où la hauteur est automatique et la largeur est de 175 px. Fondamentalement, dans chaque cas, quelle que soit la dimension qui dépasse l'autre, elle est définie sur auto, car naturellement la plus grande dimension serait celle qui déborderait en dehors des dimensions de vignette définies (175 px x 175 x).

Et si vous souhaitez ajouter des marges entre les pouces, par exemple une marge blanche de 5 pixels, vous pouvez utiliser la propriété border, sinon il n'y aura pas de marge là où les informations débordent.

J'espère que cela a du sens.

4
Peter

Déterminez la largeur et la hauteur de l'image, puis la classe portrait ou paysage active de l'image. Si le portrait fait {height:175px; width:auto}. Si paysage, inverser la hauteur et la largeur.

0
technoarya