Object Fit - Tailwind CSS
Có thể bạn quan tâm
Basic usage
Resizing to cover a container
Use the object-cover utility to resize an element’s content to cover its container.
Containing an element
Use the object-contain utility to resize an element’s content to stay contained within its container.
Stretching to fit a container
Use the object-fill utility to stretch an element’s content to fit its container.
Scaling down if too large
Use the object-scale-down utility to display an element’s content at its original size but scale it down to fit its container if necessary.
Using an element’s original size
Use the object-none utility to display an element’s content at its original size ignoring the container size.
Applying conditionally
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:object-scale-down to only apply the object-scale-down utility on hover.
<img class="object-contain hover:object-scale-down">For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:object-scale-down to apply the object-scale-down utility at only medium screen sizes and above.
<img class="object-contain md:object-scale-down">To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.
Từ khóa » Html Css Stretch Image To Fit Div
-
How To Auto-resize An Image To Fit Into A DIV Container Using CSS
-
Stretch Image To Fit 100% Of Div Height And Width - Stack Overflow
-
CSS Object-fit Property - W3Schools
-
How To Auto-resize An Image To Fit A Div Container Using CSS?
-
Make Image Stretch To Fit Div Code Example
-
Css Stretch Image To Fill Div Code Example - Code Grepper
-
How To Auto-Resize The Image To Fit An HTML Container - W3docs
-
Css Resize Image To Fit Div No Stretching - MaxInterview
-
How To Resize An Image In HTML?
-
Object-fit | CSS-Tricks
-
How To Scale And Crop Images With CSS Object-fit | DigitalOcean
-
How To Stretch A Background Image To Fit A Web Page - ThoughtCo
-
How To Fill A Box With An Image Without Distorting It - MDN Web Docs
-
Object-fit - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla