Хосияти object-fit

Хосияти object-fit нисбати тарафҳо ё масштаббандии элементҳое чун тасвир ё видеоро муайян мекунад.

Синтаксис

cssинтихобкунанда {
  object-fit: fill ё contain ё cover ё none;
}

Дар ҷадвал арзишҳои асосӣ барои хосияти object-fit пешниҳод шудаанд:

Арзишҳо

Арзиш	Тавсиф
`fill`	Масштаббандии элемент барои мувофиқат ба андозаҳои додашуда, дар ҳоле ки нисбати тарафҳои элемент нодида гирифта мешавад.
`contain`	Масштаббандии элемент барои мувофиқат ба андозаҳои додашуда, дар ҳоле ки нисбати тарафҳои элемент нигоҳ дошта мешавад.
`cover`	Андозаҳои элемент тағйир дода мешаванд, то ки пурра пур кунанд минтақаи муайянкардаро, дар ҳоле ки нисбати тарафҳои худи элемент нигоҳ дошта мешавад.
`none`	Андозаҳои ибтидоии элемент нигоҳ дошта мешаванд.

Намуна

Биёед ба тасвири мо пуркунии андозаи муайянкардаро бе нигоҳдории нисбати тарафҳо таъин кунем:

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;
}

Результат:

Ҳамчунин бубинед

хосияти aspect-ratio,
ки нисбати тарафҳои элементро муайян мекунад