0
点赞
收藏
分享

微信扫一扫

一种图片展示的完美方案,图片展示,object-fill


通常一般的处理

<style>
.img-container {
width: 300px;
height: 200px;
background: #f60;
}
img {
width: 100%;
height: 100%;

}
</style>
</head>
<body>
<div class="img-container">
<img src="./行道树.png" alt="">
</div>
</body>

一种图片展示的完美方案,图片展示,object-fill_缩放


但是如果照片尺寸不符合这个容器的长宽比例,就裂开了

<style>
.img-container {
width: 100px;
height: 200px;
background: #f60;
}
img {
width: 100%;
height: 100%;

}
</style>
</head>
<body>
<div class="img-container">
<img src="./行道树.png" alt="">
</div>
</body>

一种图片展示的完美方案,图片展示,object-fill_图片展示_02

解决图片现实的困局,使用object-fit属性:

contain

被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。

将会被缩放,在填充的时候会保证宽高比,保证保持宽高比的情况下会添加"黑边"(优点:图片一定会被全貌展示;缺点:黑边的宽度把握不住

<style>
.img-container {
width: 150px;
height: 300px;
background: #f60;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="img-container">
<img src="./行道树.png" alt="">
</div>
</body>

一种图片展示的完美方案,图片展示,object-fill_object-fill_03

cover

保证图片宽高比的同时,会充满整个内容区域,会进行裁剪。不会全貌展示,但是看着比较舒适,具体展示哪一部分,裁剪哪一部分,不可控

<style>
.img-container {
width: 200px;
height: 300px;
background: #f60;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="img-container">
<img src="./行道树.png" alt="">
</div>
</body>

一种图片展示的完美方案,图片展示,object-fill_图片展示_04

fill

充满整个内容区域,如果宽高比与内容框不相匹配,那就拉伸图片,以适应内容区(这个属性比较鸡肋,跟裂开的代码别无而致

<style>
.img-container {
width: 600px;
height: 300px;
background: #f60;
}
img {
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
</head>
<body>
<div class="img-container">
<img src="./行道树.png" alt="">
</div>
</body>

一种图片展示的完美方案,图片展示,object-fill_宽高_05

none

被替换内容将==维持原有的尺寸==。当内容大于容器的时候回进行裁剪,当内容小于容器的时候,会进行居中显示

<style>
.img-container {
width: 100px;
height: 200px;
background: #f60;
}
img {
width: 100%;
height: 100%;
object-fit: none;
}
</style>
</head>
<body>
<div class="img-container">
<img src="./行道树.png" alt="">
</div>
</body>

一种图片展示的完美方案,图片展示,object-fill_宽高_06

<style>
.img-container {
width: 600px;
height: 400px;
background: #f60;
}
img {
width: 100%;
height: 100%;
object-fit: none;
}
</style>
</head>
<body>
<div class="img-container">
<img src="./行道树.png" alt="">
</div>
</body>

一种图片展示的完美方案,图片展示,object-fill_缩放_07

<style>
.img-container {
width: 100px;
height: 400px;
background: #f60;
}
img {
width: 100%;
height: 100%;
object-fit: none;
}
</style>
</head>
<body>
<div class="img-container">
<img src="./行道树.png" alt="">
</div>
</body>

一种图片展示的完美方案,图片展示,object-fill_宽高_08

scale-down

这个相当于是container 和none 两者的属性,具体使用哪一个,看哪一个的占地内容较少

<style>
.img-container {
width: 600px;
height: 400px;
background: #f60;
}
img {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
</head>
<body>
<div class="img-container">
<img src="./行道树.png" alt="">
</div>
</body>

一种图片展示的完美方案,图片展示,object-fill_一种图片展示的完美方案_09

<title>Document</title>
<style>
.img-container {
width: 600px;
height: 400px;
background: #f60;
}
img {
width: 100%;
height: 100%;
object-fit: scale-down;
}
</style>
</head>
<body>
<div class="img-container">
<img src="./行道树.png" alt="">
</div>
</body>

一种图片展示的完美方案,图片展示,object-fill_object-fill_10


举报

相关推荐

0 条评论