object-fit հատկությունը
object-fit հատկությունը սահմանում է
այնպիսի տարրերի կողմերի հարաբերակցությունը կամ մասշտաբավորումը,
ինչպիսիք են պատկերը
կամ տեսանյութը:
Շարահյուսություն
ընտրիչ {
object-fit: fill կամ contain կամ cover կամ none;
}
Աղյուսակում ներկայացված են object-fit
հատկության հիմնական արժեքները.
Արժեքներ
| Արժեք | Նկարագրություն |
|---|---|
fill |
Տարրի մասշտաբավորումը՝ տրված չափսերին համապատասխանելու համար, մինչդեռ տարրի համամասնությունները անտեսվում են: |
contain |
Տարրի մասշտաբավորումը՝ տրված չափսերին համապատասխանելու համար, մինչդեռ տարրի համամասնությունները պահպանվում են: |
cover |
Տարրի չափսերը փոխվում են՝ ամբողջությամբ լցնելու նշված տարածքը, մինչդեռ տարրի համամասնությունները պահպանվում են: |
none |
Տարրի սկզբնական չափսերը պահպանվում են: |
Օրինակ
Եկեք մեր պատկերին տանք նշված չափսի լրացում՝ առանց համամասնությունները պահպանելու.
<div>
<img src="bg.png">
</div>
img {
object-fit: fill;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Օրինակ
Իսկ այժմ եկեք անենք, որ պատկերը լցնի նշված կոնտեյները՝ պահպանելով համամասնությունները.
<div>
<img src="bg.png">
</div>
img {
object-fit: contain;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Օրինակ
Եկեք մեր պատկերով լցնենք նշված կոնտեյները այնպես, որ հենց պատկերի չափը փոխվի, բայց դրա համար պահպանվեն դրա համամասնությունները.
<div>
<img src="bg.png">
</div>
img {
object-fit: cover;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Օրինակ
Եկեք ուղղակի տեղադրենք մեր պատկերը նշված կոնտեյներում՝ պահպանելով դրա սկզբնական չափսերը.
<div>
<img src="bg.png">
</div>
img {
object-fit: none;
height: 400px;
width: 300px;
border: 1px solid black;
}
:
Տեսեք նաև
-
aspect-ratioհատկությունը,
որը սահմանում է տարրի կողմերի հարաբերակցությունը