object-fit հատկությունը

object-fit հատկությունը սահմանում է այնպիսի տարրերի կողմերի հարաբերակցությունը կամ մասշտաբավորումը, ինչպիսիք են պատկերը կամ տեսանյութը:

Շարահյուսություն

cssընտրիչ {
  object-fit: fill կամ contain կամ cover կամ none;
}

Աղյուսակում ներկայացված են object-fit հատկության հիմնական արժեքները.

Արժեքներ

Օրինակ

Եկեք մեր պատկերին տանք նշված չափսի լրացում՝ առանց համամասնությունները պահպանելու.

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: fill;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Օրինակ

Իսկ այժմ եկեք անենք, որ պատկերը լցնի նշված կոնտեյները՝ պահպանելով համամասնությունները.

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: contain;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Օրինակ

Եկեք մեր պատկերով լցնենք նշված կոնտեյները այնպես, որ հենց պատկերի չափը փոխվի, բայց դրա համար պահպանվեն դրա համամասնությունները.

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: cover;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Օրինակ

Եկեք ուղղակի տեղադրենք մեր պատկերը նշված կոնտեյներում՝ պահպանելով դրա սկզբնական չափսերը.

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: none;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Տեսեք նաև