Ostatnio edytowany:

object-fit

Autor: Virtual Patriot

Opis właściwości object-fit

Za pomocą właściwości object-fit możemy określić w jaki sposób treść reprezentowana przez interesujący nas element HTML powinna wypełnić rozmiar obszaru zawartości, jaki został ustalony dla tego elementu HTML. Mowa tu o treści reprezentowanej między innymi przez taki element HTML jak: element img, element embed, element object lub element video.

Dodatkowe techniczne informacje o właściwości object-fit

przeznaczenie
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

Interpretacja właściwości object-fit

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

nie

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości object-fit

fill

Opis

Wartość fill jest domyślną wartością właściwości object-fit.

Domyślnie pierwotny rozmiar treści reprezentowanej przez element HTML jest przeskalowywany w taki sposób, aby treść wypełniła w całości rozmiar obszaru zawartości, jaki został ustalony dla elementu HTML.

Przykład

rozmiar obrazka po dodaniu do elementu img właściwości object-fit wraz z wartością fill

Pierwotny rozmiar obrazka "zwierze-01.png" reprezentowanego przez przykładowy element "img" został przeskalowany w taki sposób, że obrazek "zwierze-01.png" wypełnił w całości rozmiar obszaru zawartości przykładowego elementu "img".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        width:250px;
        height:400px;
        border:10px dashed black;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <img src="http://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

contain

Opis

Za pomocą wartości contain właściwości object-fit możemy sprawić, że pierwotny rozmiar treści reprezentowanej przez interesujący nas element HTML zostanie równomiernie przeskalowany w taki sposób, aby wspomniana treść w całości zmieściła się w rozmiarze obszaru zawartości, jaki został ustalony dla wspomnianego elementu HTML.

Przykład

rozmiar obrazka po dodaniu do elementu img właściwości object-fit wraz z wartością contain

Pierwotny rozmiar obrazka "zwierze-01.png" reprezentowanego przez przykładowy element "img" został równomiernie przeskalowany w taki sposób, że obrazek "zwierze-01.png" w całości mieści się w rozmiarze obszaru zawartości przykładowego elementu "img", ponieważ do wspomnianego elementu "img" została dodana właściwość "object-fit" wraz z wartością "contain".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        object-fit:contain;
        width:250px;
        height:400px;
        border:10px dashed black;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <img src="http://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

cover

Opis

Za pomocą wartości cover właściwości object-fit możemy sprawić, że pierwotny rozmiar treści reprezentowanej przez interesujący nas element HTML zostanie równomiernie przeskalowany w taki sposób, aby wspomniana treść pokryła cały rozmiar obszaru zawartości, jaki został ustalony dla wspomnianego elementu HTML.

Przykład

rozmiar obrazka po dodaniu do elementu img właściwości object-fit wraz z wartością cover

Pierwotny rozmiar obrazka "zwierze-01.png" reprezentowanego przez przykładowy element "img" został równomiernie przeskalowany w taki sposób, że obrazek "zwierze-01.png" pokrywa cały rozmiar obszaru zawartości przykładowego elementu "img", ponieważ do wspomnianego elementu "img" została dodana właściwość "object-fit" wraz z wartością "cover".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        object-fit:cover;
        width:250px;
        height:400px;
        border:10px dashed black;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <img src="http://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

none

Opis

Za pomocą wartości none właściwości object-fit możemy sprawić, że pierwotny rozmiar treści reprezentowanej przez interesujący nas element HTML nie zostanie w żaden sposób zmieniony.

Przykład

rozmiar obrazka po dodaniu do elementu img właściwości object-fit wraz z wartością none

Pierwotny rozmiar obrazka "zwierze-01.png" reprezentowanego przez przykładowy element "img" nie został w żaden sposób zmieniony, ponieważ do wspomnianego elementu "img" została dodana właściwość "object-fit" wraz z wartością "none".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        object-fit:none;
        width:250px;
        height:400px;
        border:10px dashed black;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <img src="http://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>

scale-down

Opis

Za pomocą wartości scale-down właściwości object-fit możemy sprawić, że jeżeli pierwotny rozmiar treści reprezentowanej przez interesujący nas element HTML jest większy niż rozmiar obszaru zawartości, jaki został ustalony dla wspomnianego elementu HTML, wtedy pierwotny rozmiar treści reprezentowanej przez wspomniany element HTML zostanie równomiernie przeskalowany w taki sposób, aby wspomniana treść w całości zmieściła się w rozmiarze obszaru zawartości, jaki został ustalony dla wspomnianego elementu HTML (w przeciwnym wypadku pierwotny rozmiar wspomnianej treści nie zostanie w żaden sposób zmieniony).

Przykład

rozmiar obrazka po dodaniu do elementu img właściwości object-fit wraz z wartością scale-down

Pierwotny rozmiar obrazka "zwierze-01.png" reprezentowanego przez przykładowy element "img" jest zbyt duży, aby obrazek "zwierze-01.png" w całości zmieścił się w rozmiarze obszaru zawartości przykładowego elementu "img", dlatego pierwotny rozmiar obrazka "zwierze-01.png" reprezentowanego przez przykładowy element "img" został równomiernie przeskalowany w taki sposób, że obrazek "zwierze-01.png" w całości mieści się w rozmiarze obszaru zawartości przykładowego elementu "img", ponieważ do wspomnianego elementu "img" została dodana właściwość "object-fit" wraz z wartością "scale-down".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      img {
        object-fit:scale-down;
        width:250px;
        height:400px;
        border:10px dashed black;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <img src="http://webkod.pl/files/css/zwierze-01.png" alt="zdjęcie lwa">

  </body>
</html>