-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
[css] 第100天 如何让大小不同的图片等比缩放不变形显示在固定大小的div里?写个例子 #980
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
|
图片设
div设
自适应缩放居中 扩展下一个完整的div包裹图片,在图片没加载完得时候坍缩现象 |
用定位的方式
用弹性布局
|
<style>
.dv{
width: 100px;
height: 100px;
border: 3px solid #f00;
float: left;
margin-right: 20px;
}
.dv img{
object-fit: contain;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="dv">
<img src="./imgs/1.png" alt="">
</div>
<div class="dv">
<img src="./imgs/2.png" alt="">
</div>
<div class="dv">
<img src="./imgs/3.png" alt="">
</div>
</body>
<style>
.dv{
width: 100px;
height: 100px;
border: 3px solid #f00;
float: left;
margin-right: 20px;
background-repeat: no-repeat;
background-size: contain;
}
.dv:nth-child(1){
background-image: url('./imgs/1.png');
}
.dv:nth-child(2){
background-image: url('./imgs/2.png');
}
.dv:nth-child(3){
background-image: url('./imgs/3.png');
}
</style>
</head>
<body>
<div class="dv">
</div>
<div class="dv">
</div>
<div class="dv">
</div>
</body> |
好像没有答案 |
|
|
以前没用过object-fit,感觉挺方便的,少写好几行css 😂 |
|
第100天 如何让大小不同的图片等比缩放不变形显示在固定大小的div里?写个例子
The text was updated successfully, but these errors were encountered: