Object: fit, position. Masking.

Do czego można to wykorzystać?

1. object-fit:
   • Zastosowanie: Służy do określenia, jak zawartość elementu (np. obrazek lub wideo) powinna być dopasowana do kontenera.
   • Przykład: Jeśli masz obrazek o różnych proporcjach niż kontener, możesz użyć object-fit: cover;, aby obrazek wypełnił cały kontener, przycięty do odpowiednich proporcji.
2. object-position:
   • Zastosowanie: Umożliwia precyzyjne ustawienie pozycji zawartości w kontenerze, gdy używasz object-fit.
   • Przykład: Możesz ustawić obrazek w centrum kontenera za pomocą object-position: center; lub przesunąć go w dowolne miejsce, np. object-position: top right;.
3. Masking:
   • Zastosowanie: Pozwala na ukrywanie części elementu za pomocą maski, co może być użyteczne do tworzenia efektów graficznych.
   • Przykład: Możesz użyć mask-image do nałożenia maski na obrazek, np. mask-image: url(mask.png);, aby tylko określone części obrazka były widoczne.
4. Przykład object-fit

cw 660

• Utwórz dokument cw660.html oraz cw660.css
• Zaimplementuj kod z przykładu

  kod html

• Wszystkie ustawienia stylu przenieś i zapisz w pliku zewnętrznym
• Zmodyfikuj styl tak, aby otrzymać efekt podobny jak na załączonym obrazie. Przykład

 

Pytania i odpowiedzi: