თვისება 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;
}

Результат:

იხილეთ აგრეთვე