De Wiki @ Brest
Ligne 1 : | Ligne 1 : | ||
{{#css: | {{#css: | ||
− | .crop{ | + | .img-crop, |
− | + | .img-crop img{ | |
− | + | width: 100%; /* gotta be responsive these days */ | |
− | overflow:hidden; /* | + | } |
− | + | .img-crop{ | |
− | + | background-color: #ededed; /* some background color for short images */ | |
− | + | overflow: hidden; | |
− | } | + | |
− | /* | + | /* remove white-space for inline-block elements */ |
− | .crop img{ | + | letter-spacing: -0.31em; /* webkit */ |
− | margin:- | + | *letter-spacing: normal; /* reset IE < 8 */ |
− | + | word-spacing: -0.43em; /* IE < 8 && gecko */ | |
+ | } | ||
+ | .img-crop:before, | ||
+ | .img-crop img{ | ||
+ | /* vertically center the image */ | ||
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | .img-crop:before{ | ||
+ | /* pseudo element to vertically align image to */ | ||
+ | content: ""; | ||
+ | |||
+ | /* Magic Number */ | ||
+ | /* Set this to your desired height(to width) ratio */ | ||
+ | padding-top: 75%; /* % of original image width */ | ||
+ | } | ||
+ | .img-crop img{ | ||
+ | /* removes(sorta) image from the flow */ | ||
+ | padding-left: 100%; | ||
+ | margin: -999em -100%; | ||
+ | } | ||
}}<includeonly>{{#ifeq: {{{file}}} | Oui | }}<includeonly>{{#ifeq: {{{file}}} | Oui | ||
− | | <div class="crop">[[Image:{{{element|}}}|150px]]</div> | + | | <div class="img-crop ratio-4-to-3">[[Image:{{{element|}}}|150px]]</div> |
| * [[Liste/{{PAGENAME}}::{{{element|}}}]] | | * [[Liste/{{PAGENAME}}::{{{element|}}}]] | ||
}}[[Catégorie:Bazar/Listes]]</includeonly><noinclude>[[Catégorie:Bazar/Modèles]]{{Modèle:BazarDoc}}</noinclude> | }}[[Catégorie:Bazar/Listes]]</includeonly><noinclude>[[Catégorie:Bazar/Modèles]]{{Modèle:BazarDoc}}</noinclude> |
Version du 11 juillet 2013 à 12:30
{{#css: .img-crop, .img-crop img{ width: 100%; /* gotta be responsive these days */ } .img-crop{ background-color: #ededed; /* some background color for short images */ overflow: hidden;
/* remove white-space for inline-block elements */ letter-spacing: -0.31em; /* webkit */ *letter-spacing: normal; /* reset IE < 8 */ word-spacing: -0.43em; /* IE < 8 && gecko */ } .img-crop:before, .img-crop img{ /* vertically center the image */ display: inline-block; vertical-align: middle; } .img-crop:before{ /* pseudo element to vertically align image to */ content: "";
/* Magic Number */ /* Set this to your desired height(to width) ratio */ padding-top: 75%; /* % of original image width */ } .img-crop img{ /* removes(sorta) image from the flow */ padding-left: 100%; margin: -999em -100%; } }}
| ||||
|
[edit] Description: Arguments:
Usage: |