<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>object-fit图片裁剪</title>
<style>
*{padding:0; margin:0;box-sizing: border-box;}
body{ background: #f6f6f6;}
.headTitle{
text-align: center;
color:#555;
font-size: 26px;
padding:30px 0;
}
.layout{
width: 80%;
min-height: 500px;
background: #fff;
border-radius: 10px;
margin:0 auto;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
padding:30px;
/* grid布局 两端对齐,最后一行左对齐 */
display: grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:20px;
}
.layout .box{
background: #D1E8E2;
border-radius: 8px;
padding:10px;
display: flex;
align-items: center;
justify-content: center;
color:#fff;
aspect-ratio: 9/16;
}
@supports not(aspect-ratio: 9/16){
.layout .box{
height: 500px;
}
}
.layout .box img{
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="headTitle">object-fit图片裁剪</div>
<div class="layout">
<div class="box">
<img src="./images/pic1.jpg" alt="">
</div>
<div class="box">
<img src="./images/pic2.jpg" alt="">
</div>
<div class="box">
<img src="./images/pic3.jpg" alt="">
</div>
<div class="box">
<img src="./images/pic4.jpg">
</div>
<div class="box">
<img src="./images/pic5.jpg" alt="">
</div>
<div class="box">
<img src="./images/pic6.jpg" alt="">
</div>
<div class="box">
<img src="./images/pic7.jpg" alt="">
</div>
<div class="box">
<img src="./images/pic8.jpg" alt="">
</div>
<div class="box">
<img src="./images/pic9.jpg" alt="">
</div>
<div class="box">
<img src="./images/pic10.jpg" alt="">
</div>
<div class="box">
<img src="./images/pic11.jpg" alt="">
</div>
<div class="box">
<img src="./images/pic16.jpg" alt="">
</div>
</div>
</body>
</html>
自定义元素宽高比例（aspect-ratio）与@supports兼容支持和图片裁剪（object-fit）的用法
3 浏览量
2023-11-01
09:21:57
上传
评论
收藏 2.72MB ZIP 举报
css自定义元素宽高比例-源码.zip （21个子文件） 
源码 
demo3.html 3KB demo2.html 3KB images 
pic12.jpg 23KB pic5.jpg 86KB pic6.jpg 69KB pic15.jpg 52KB pic10.jpg 35KB pic8.jpg 276KB pic9.jpg 71KB pic16.jpg 426KB pic4.jpg 172KB
pic10.png 717KB pic2.jpg 121KB pic3.jpg 105KB pic1.jpg 118KB pic9.png 113KB pic11.jpg 33KB pic7.jpg 308KB pic13.jpg 112KB pic14.jpg 42KB demo1.html 2KB资源评论
咸虾米_
- 粉丝: 1233
- 资源: 3
