CSS3 object-fit 和 object-postion 实现图片居中缩放
object-fit
最近在复习VUE，准备面试，在看了 “VUE实例” 的时候发现了这个属性，搜索了一下发现效果挺好。
不用 object-fit 实现 cover 效果
以前的时候，做用户头像或者新闻栏的时候，用到的图片基本默认都是使用 fill 填充到整个容器中的。如果图片比例和容器比例差太多，就会产生形变。以前的做法是外面嵌套一个 div 并 设置 overflow : hidden，然后内部容器使用 JS 进行判断，对于小的边设置 100%，另一个设置 auto。这样才能达到充满又不变形的效果。而现在只需要使用 object-fit : cover 这一条配置就可以实现上面繁杂的判断内容了。
示例代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
div {
width: 30rem;
height: 30rem;
border: 1px solid red;
margin: 2rem;
/** 隐藏超出的内容 */
overflow: hidden;
/** 用来居中 **/
display:flex;
justify-content:center;
align-items:center;
}
.cover-width {
width: 100%;
height: auto;
}
.cover-height {
width: auto;
height: 100%;
}
</style>
<script>
window.()=>{
const imgs = document.getElementsByTagName("img");
for(const img of imgs) {
img.classList.add("cover-" + (img.naturalWidth < img.naturalHeight ? "width" : "height"));
}
}
</script>
</head>
<body>
<div>
<img src="seiya1.jfif"/>
</div>
<div>
<img src="seiya2.jfif"/>
</div>
</body>
</html>
内容区域（内容盒子）
下图是浏览器调试工具里显示的盒模型。content-box 即内容盒子，指的是虚线框内部的区域。img 元素的 src 所填充的区域不会超过这个内容区域。
可选的值范围
| 值 | 描述 |
|---|---|
| fill | 默认值。拉伸并填满整个内容区域 |
| contain | 保持原有尺寸比例，进行缩放，保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。 |
| cover | 保持原有尺寸比例，进行缩放，保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让内容的部分区域不可见 |
| none | 不进行任何处理，保持内容原始尺寸 |
| scale-down | 使用 none 或 contain 中最终呈现的尺寸更小的那个 |
代码示例（VUE）
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#app {
display: flex;
justify-content: space-around;
align-content: space-around;
flex-wrap: wrap;
}
h1 {
font-size: 5rem;
text-align: center;
}
img {
border: 2px solid red;
width: 40rem;
height: 40rem;
}
img:nth-child(2n+1) {
border-color: blue;
}
</style>
</head>
<body>
<div id="app">
<div v-for="value in objectFits">
<!-- 当 value 是 0，false，""，NaN，null，undefined 的时候都会被判定为 false -->
<h1>{{ value || "原图" }}</h1>
<img src="seiya1.jfif" :style="{objectFit: value}"/>
<img src="seiya2.jfif" :style="{objectFit: value}"/>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
objectFits : ['','fill','contain','cover','none','scale-down'],
color: 'red'
}
});
</script>
</body>
</html>
</html>
object-position
object-position 和 background-position 可选的值是一样的。用来定义图片相对当前元素的位置。可选值如下：
可选的值范围
| 值 | 描述 |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
如果仅规定了一个关键词，那么第二个值将是 center |
| x% y% | 第一个值是水平位置，第二个值是垂直位置 左上角是 0% 0%，右下角是100% 100% 如果仅规定了一个值，另一个值将是 50% |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置 左上角是 0 0。单位是像素（0px 0px）或任何其它 CSS 单位。 如果仅规定了一个值，另一个将是50% 可以混合使用 % 和 position 值 |