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.

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

przeznaczenie

element img, element embed, element object lub element video

pozycja

dowolna

dziedziczenie

nie

wartość initial

fill

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości object-fit

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak

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

  object-fit:fill;
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:#CBFFFF;
      }
    </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

  object-fit:contain;
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:#CBFFFF;
      }
    </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

  object-fit:cover;
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:#CBFFFF;
      }
    </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

  object-fit:none;
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:#CBFFFF;
      }
    </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

  object-fit:scale-down;
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:#CBFFFF;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>