[CSS 3] Apply Aspect Ratio Sizing to Images with CSS object-fit
CSS to with object apply Images fit Aspect
2023-09-14 09:00:46 时间
The CSS property object-fit
instructs an img
to act as the container for its own contents. We can then use the value cover
to have the image content behave similar to a background-image
by scaling up or down to fit the provided dimensions. If the goal is for the image contents to remain fully visible within a container while maintaining its aspect ratio, we can use the value scale-down
.
.object-fit-cover .card img { object-fit: cover; width: 100%; height: 25vh; border-radius: 8px 8px 0 0; } .object-fit-scale-down .card img { object-fit: scale-down; width: 100%; height: 25vh; padding: 1rem; }
相关文章
- css两栏布局、圣杯布局、双飞翼布局
- CSS包含块containing block详解
- [CSS] Use CSS Transforms to Create Configurable 3D Cuboids
- [CSS 3] Use Multiple Background Images to Create Single Element CSS Art
- [Nuxt] Add CSS Libraries to Nuxt
- [CSS] Introduction to CSS Columns
- [CSS] Using single grid-template-area and justify-self to select arrow down icon in select
- [CSS] Use CSS Transforms to Create Configurable 3D Cuboids
- [CSS] Conditionally Assign Style to a Parent Element with Focus-Within Pseudo-class
- [CSS] Use CSS Counters to Create Pure CSS Dynamic Lists
- [CSS3] Using CSS Combinators to Identify Siblings and Descendants in CSS
- atitit。html css框架Bootstrap Foundation的比较与不同 attilax大总结
- 零基础学Python-爬虫-3、利用CSS选择器爬取整篇网络小说
- css——图片缩放,拉伸,变形的解决办法
- 实训-利用HTML+CSS做响应式项目网页
- 2023前端面试重点知识点总结【详细】css+js+vue+react+小程序+性能优化等等