3 css simplă și rapidă pentru tehnica decupa imagini, despre crearea site-uri web
În acest articol, vă vom spune despre cele 3 metode rapide și simple de CSS. cmozhete pe care le utilizați pentru a afișa numai o parte a imaginii de pe pagina ta.
Toate metodele utilizate sunt de fapt nevoie doar de o pereche de linii de cod CSS. Cu toate acestea, acest lucru nu este circumcis în adevăratul sens al cuvântului (CSS, până când nu se poate face acest lucru), trebuie doar să ne ascundem și arată doar o parte a imaginii pe care dorim să vedem.
Aceste tehnici pot fi foarte util dacă doriți să aducă o imagine într-o anumită dimensiune, care este, doriți să creați, de exemplu, miniaturile sale (copie mică a imaginii) în secțiunea de știri, sau ceva de genul asta.
Tehnica 1 - Utilizarea marjelor negative (Margini negative)
a se vedea exemplul
Conform acestei tehnici, imaginea trebuie să fie plasat în elementul mamă, în cazul nostru, este punctul (tag-ul
). punctul Parental trebuie plutitoare elementul (plutitor) (sau o lățime predeterminată). Această tehnică nu va funcționa pe elementele cu atributul „lățime completă» (lățime completă).
Apoi ne-am stabilit marjele negative pentru toate cele patru laturi: top (sus), dreapta (dreapta), partea de jos (de jos) și stânga (stânga). câmpuri negative precizează: modul în care taie în fiecare direcție a imaginii noastre, care este în părinte (punctul). Obținem doar o parte a imaginii originale - o însemnare. Apoi, când vom înlocui proprietatea părinte la preaplinul ascunsă. ne ascundem câmpurile care sunt dincolo de tăiere noastre. Scopul este atins. Veți, cu toate acestea, trebuie să se joace cu valorile pentru a simți cu adevărat cum funcționează.
Astfel, HTML arată astfel:
concluzie
Dacă citi cu atenție exemple una după alta, veți observa că acestea sunt absolut identice. Acest lucru dovedește încă o dată că există mai multe moduri de a realiza același lucru în CSS.
Ce mi-ar fi ales pentru acest efect special?
Am folosit tehnica de la numărul 1 - marje negative. Aceasta este cea mai simplă și mai rapidă de toate împreună. În plus, atunci când doriți să schimbați ceva, nu trebuie să se schimbe valorile parentale: doar schimba marginile negative, iar părintele în sine „adapta“.
Ați putea fi interesat să ↓↓↓
- Centrarea DIV pe orizontală și pe verticală
- Reveal - modal fereastră cu jQuery
- Crearea unui triunghi pe CSS
- Schimbarea la img src, folosind jQuery
Am nevoie pentru a decupa dimensiunea imaginii de 250 × 250 sau 300 × 300 (imagini de dimensiuni diferite), până la 250 × 200 și 300 × 200
Multumesc pentru articol!
Cum să se înregistreze în css, care ar fi întotdeauna imaginea de toate dimensiunile au fost decupate la o anumită dimensiune (să zicem 180rh 100rh)
Vino în minte sunt două opțiuni:
1. Așezați imaginea într-un recipient cu o dimensiune fixă și cu preaplin de proprietate: ascuns
2. O imagine de fundal a oricărui element bloc cu dimensiuni fixe și apoi din nou cu preaplinul de proprietate: ascuns.