dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
TW Toate comenzile Tailwind CSS

Încadrarea imaginilor cu object-cover și object-contain în Tailwind în Tailwind CSS

Layout, Box Model și Poziționare Toate versiunile Tailwind Q&A / Distribuie cod

Controlează modul de redimensionare a conținutului imaginilor sau videoclipurilor (object-fit) în cutia alocată.

Sintaxă 
object-cover | object-contain | object-center

Ce sunt clasele object- în Tailwind CSS

Proprietatea CSS object-fit rezolvă problema deformării sau alungirii imaginilor:

  • object-cover: umple complet containerul păstrând proporțiile imaginii prin decuparea surplusului (ideal pentru poze de profil și bannere).
  • object-contain: scalează imaginea pentru a fi complet vizibilă în interiorul cutiei, adăugând benzi goale dacă este necesar.
  • object-center: centrează punctul focal al imaginii în decupaj.
Exemplu Concret: Poza de produs adaptată fără distorsionare
<img class="w-full h-48 object-cover rounded-t-lg" src="produs.jpg" alt="Produs" />

Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Încadrarea imaginilor cu object-cover și object-contain în Tailwind

Ai o nelămurire despre utilizarea comenzii Încadrarea imaginilor cu object-cover și object-contain în Tailwind sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.