Cum de a face aceleași imagini de dimensiune pe listă, fără a crea galerii în miniatură din cauza css
Problema pentru multe webmasteri pentru a crea galerii, imagini, liste, sau când se emit imagini miniaturale ale mărfurilor este supusă aceleași proporții. Sunt de acord o plăcere să se uite la miniaturi de proporții identice, decât în cazul în care acestea au fost discordant.
Eu de obicei, rezolvă această problemă prin deversorul: ascuns; și div, care stabilește o limită privind înălțimea imagini. Vă spun mai târziu. În primul rând să ne uităm la diferite etape capacitatea de a crea imagini în miniatură de aceeași dimensiune de cel mai rău la cel mai bun.
Deci, să presupunem că avem o galerie în două rânduri de câte trei imagini fiecare. Toate imaginile de pe înălțimea și lățimea de diferite dimensiuni, și trebuie să avem aceleași miniaturi. Facem acest lucru prin css. Live demo și descărca codul sursă, puteți în partea de jos a lecției.
Ar arăta astfel tot drumul:
Aici, fiecare imagine este învelit într-un div cu Ramka clasa căreia i se atribuie proprietatea de a alinia imaginea din stânga. Și imaginile atribuite .gallery1 dimensiune img 150px latime. Având în vedere că înălțimea nu este specificată, atunci când este încărcat inițial, astfel încât să nu denatureze proporțiile de imagini. De ce este această metodă de toate gradele mutat - din cauza faptului că înălțimea imaginii este întotdeauna diferit. Această metodă nu este adecvată.
Opțiunea 2 (cu sarcina de proporții imagine forțate)
Asta se clasează cu imaginea nu este în jurul valorii de conducere în acest exemplu, am stabilit înălțimea forțată și lățimea fiecărei imagini. Ca rezultat, imaginile devin proporții distorsionate.
Opțiunea 3 (pentru a stabili proporțiile dorite de imagini și înălțimea de tăiere)
Aceasta este una dintre cele mai bune moduri de a aduce imagini sub un singur format. L folosesc în ziua de azi, eu încă nu am învățat de obiect de proprietate-fit. Uită-te la .gallery3 .ramka - aici, acum overflow: ascuns; care limitează diva dimensiune specificată în aceasta de 150x150px. Lățimea imaginii este setată la 100%.
Prin această metodă, tot ceea ce iese din diva mai mult de 150px vor fi tăiate. În ciuda faptului că galeria de captură de ecran arată ponosit - a fost făcut în mod deliberat pentru a arăta o lipsă de metode. La galeria a fost mai mult decât plăcută, este necesar să se limiteze înălțimea Divas, cum ar fi 100px, atunci toate imaginile fără distorsiuni sunt într-o singură dimensiune. Dar dezavantajul este că imaginile cu foarte mare înălțime decupată în partea de jos.
Opțiunea 4 (cu sarcina de proporțiile relevante ale imaginilor datorită obiect în formă: capac;)
Acest exemplu demonstrează perfect modul de a crea galeria în HTML cu aceeași miniatură. Aruncati o privire la codul de pe .gallery5 img - Acum iată-ne, având în vedere dimensiunea miniatură dorită și obiect în formă caracteristică: capac; ceea ce face ca „tăierea“ de imagini pe zbor. Pictures „tăiat“, în centru, cu nici o distorsiune.
În proprietățile obiectului-fit există mai multe opțiuni.
umple - scalate conservarea proporții, dar cu o distorsiune (ca opțiunea 2).
conțin - elementul este scalat pentru a se potrivi în celulă, fără distorsiuni sau decupare
capac - imaginea este redimensionată (redusă sau crescută), astfel încât să se potrivească complet fără distorsiuni (ca opțiunea 4).
Sper ca acest tutorial va ajuta să creați cu ușurință în miniatură frumos din aceleași imagini de dimensiuni fără a imaginii de pre-procesare.
a se vedea, de asemenea,
- Plasați cursorul efecte asupra imaginii în CSS3. Galeria de imagini cu creșterea CSS3
- Cum de a schimba ordinea de blocuri div în versiunea mobilă din cauza css
- CSS3 efect de reflecție în imagine (-webkit-box-reflecta).
- Toate efectele CSS3 hover peste imagine
Vă permite să creați rapid orice fel de formă de feedback pentru site-ul dvs. cu casete de selectare, câmpuri, butoane radio, fișiere, și o mulțime de opțiuni!