Faire toutes les photos square via css
Je suis en train de faire une série de photos en photos carrées. Ils peuvent être de forme rectangulaire, à l'horizontale (c'est à dire 600x400) ou verticalement (400x600), mais je veux les amener à être 175x175 de toute façon. Mon idée a été de max-height et max-largeur du plus petit côté, et ne pas permettre à débordement au-delà de 175px sur le grand côté...cependant, je vais avoir des problèmes avec elle.
Est-ce possible avec css?
Ci-dessous est une tentative de ma part, mais de donner des rectangles encore:
<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>
Ne vous vous souciez de ratio d'aspect?
Je ne veux pas juste faire width=175 hauteur=175 comme il va regarder vraiment déformée. Mais si légèrement déformée, c'est bien.
Je ne veux pas juste faire width=175 hauteur=175 comme il va regarder vraiment déformée. Mais si légèrement déformée, c'est bien.
OriginalL'auteur user749798 | 2012-11-22
Vous devez vous connecter pour publier un commentaire.
Vous pouvez définir la largeur/hauteur de la div parent alors la valeur de l'enfant balise img de width:100%; height: auto;
Qu'à l'échelle de l'image en bas à essayer d'adapter le parent avec un ratio d'aspect à l'esprit.
Vous pouvez également définir l'image comme image de fond d'écran sur la div
Alors si vous pouvez utiliser css3, vous pouvez gâcher, avec en arrière-plan, la taille de la propriété.
C'est les attributs sont les suivants: contenir, de couverture, ou un il est spécifié hauteur (50%, 50%) (175px, 175px)
Vous pouvez également essayer de centre de l'image avec background-position
OriginalL'auteur Jesse
Bon j'ai eu ce.
Ne sais pas si c'est trop tard ou quoi, mais je suis venu avec un 100% pur CSS façon de créer square de vignettes. C'est quelque chose que j'ai essayé de trouver une solution pour un bon moment et n'ont eu aucune chance. Avec quelques essais, j'ai trouvé de travail. Les deux principaux attributs à utiliser sont OVERFLOW:HIDDEN et la LARGEUR/HAUTEUR:AUTO.
Bien là ce qu'il faut faire:
Disons que vous avez un lot d'images de différentes formes et tailles, certains paysages, certaines portrait, mais de tous, bien sûr, est de forme rectangulaire. La première chose à faire est de classer les liens d'images (vignettes) soit en mode portrait ou paysage, à l'aide d'un sélecteur de classe. Bon, alors disons que vous voulez tout simplement de créer deux vignettes, pour rendre cela plus simple. vous avez:
img1.jpg (portrait) et
img2.jpg (paysage)
Pour le HTML, il devrait ressembler à ceci:
Donc, à ce stade, car il n'y a pas de css pourtant, le code ci-dessus serait de vous donner votre pleine taille de l'image sous forme de vignette qui serait lié à la taille de l'image. Bon, alors voici le css pour à la fois portrait et paysage. Il y a deux déclarations pour chaque (le lien et le lien de l'image):
Les choses les plus importantes sont la largeur et la hauteur et le overflow:hidden. Flotteur gauche n'est pas nécessaire pour que cela fonctionne.
Dans le paysage miniature déclaration.paysage) de la boîte englobante est fixé à 175 x 175 et le trop-plein est fixé à caché. Ce qui signifie que toute l'information visuelle plus grande que celle contenant 175px la place sera caché de la vue.
Pour l'image de paysage (déclaration.paysage img), la hauteur est fixée à 175px, qui redimensionne l'origine de la hauteur et la largeur est définie sur auto, ce qui redimensionne la largeur d'origine, mais seulement au point de relatif à la délimitation carré, qui dans ce cas est 175px. Donc, plutôt que de fusion de la largeur vers le bas dans la place, tout simplement, il remplit la place et puis de toute surcharge de l'information visuelle dans la largeur (c'est à dire le dépassement de capacité) est cachée avec le overflow:hidden.
Il fonctionne de la même manière pour le portrait, seulement que la largeur et la hauteur est en marche, où la hauteur est automatique et la largeur est 175px. En gros, dans chaque cas, quelle que soit la dimension dépasse l'autre est réglé sur auto, parce que naturellement la plus grande dimension serait celle qui ferait de débordement à l'extérieur de l'ensemble de vignettes dimensions (175px x 175x).
Et si vous voulez ajouter des marges entre les pouces, par exemple un 5px marge blanche, vous pouvez utiliser la propriété border, sinon il n'y aura pas de marge, où l'information est débordante.
Espérons que cela a du sens.
Cela fonctionne comme annoncé. Recommander
* img
classes d'utilisation de 100%, plutôt que de pixels. Aussi, ce ne sera pas utiliser le centre de l'image source.vous pouvez utiliser quelque chose comme PHP getimagesize() fonction.
Alors ce n'est plus un 100% pur CSS solution.
OriginalL'auteur
Déterminer la largeur et la hauteur de l'image, puis active portrait ou paysage-classe de l'image. Si le portrait n'
{height:175px; width:auto}
. Si le paysage, à l'inverse de la hauteur et la largeur.OriginalL'auteur technoarya
J'ai très suggestion de la NailThumb plugin jquery pour quelqu'un qui est à la recherche pour ce faire. Il vous permet de créer square de vignettes sans distorsion. http://www.garralab.com/nailthumb.php
OriginalL'auteur user749798
Cela peut vous aider.
CSS:
HTML:
Cela a fonctionné pour moi. Viens de mettre l'URL de l'image à l'intérieur de la div.
OriginalL'auteur Tomas Rekstad