Modificarea dimensiunii imaginii în raport cu blocul, proiectarea și dezvoltarea site-ului

Bună ziua. 🙂

În acest tutorial vă va arăta cum să facă acest lucru cu un aspect adaptiv atunci când lățimea blocului este schimbat, imaginea care este în ea, schimba dimensiunea sa în raport cu blocul. Am avut o lecție - Cum să se întindă pe fundal întreaga lățime a blocului. similar cu aceasta, dar există bloc de fond variat. Metoda Imediat pentru imaginea inserată cu tag-ul IMG.

Un exemplu al unei imagini scalare adaptivă în raport cu unitatea de bază, puteți vedea în exemplu. Pentru a vedea schimbarea imaginii, pur și simplu modificați dimensiunea ferestrei browserului.

Acest efect este realizat cu un simplu CSS. Dacă pur și simplu conectați imaginea, acesta poate merge dincolo de bloc și nu este exact ceea ce ai nevoie, mai ales în cazul în care unitatea își schimbă dimensiunea sa, care este, site-ul utilizează un aspect adaptiv.

Bloc în care se introduce o imagine, poate avea o lățime fixă ​​în pixeli sau o modificare în ceea ce privește dimensiunea ferestrei browser-ului. Imaginea poate avea dimensiuni diferite, dar pentru a arata bine, este necesar să se adauge stiluri. Înainte de aceasta, puteți atribui o clasă, sau un set de stiluri dată pentru toate imaginile dintr-o dată.

De exemplu, unitatea va avea o lățime de 75% în raport cu ecranul, imaginea va prelua întreaga lățime și de a schimba dimensiunea cu unitatea.

Vom bloca stiluri:

Imagine atribuie o lățime maximă în procente și determinarea automată a înălțimii. Înălțimea în mod necesar diferite, cu lățime descrescătoare a blocului, imaginea se va schimba lățimea, dar nu înălțimea și are o formă neregulată. stiluri Ready va fi aproximativ.

După cum puteți vedea, totul este foarte simplu. Dacă specificați în mod corect toți parametrii, rezultatul va fi, de asemenea, necesar. La un moment dat, am suferit pentru a obține acest efect.

Asta e tot, vă mulțumesc pentru atenție. 🙂

Dacă ați fost utile pentru munca mea, vă poate sprijini site-ul dvs. :)

Bună ziua dragi prieteni

Ai instalat extensia AdBlock sau altele asemenea. Adaugă site-ul meu pe lista albă, și, astfel, vnesesh contribuie la dezvoltarea acesteia. Instrucțiuni despre cum să dezactivați AdBlock doriți această fereastră