Хосияти 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,
ки нисбати тарафҳои элементро муайян мекунад