2022-01-08留言
还有另一种方法是给div设置背景图片属性：
background-image: url();
background-repeat: no-repeat;
background-position: center;
background-size: cover;

1
2
3
<div class="box">
    <img class="image" src="">
</div>

如题，如果某个<div>的长宽是“200*150”，
此时若想要往里面放置一个长宽是“400*300”的图片，
且要求图片：

  1. 等比例缩放（不能变形）
  2. 图片在div里水平竖直都居中
  3. 四个边不能留空隙，超出部分裁切掉

那么我们可以想到用CSS的 object-fit 属性。该属性可以指定<img>图片应该如何适应到高度和宽度已经确定的框中，来切换<img>图片对象在元素框内的对齐方式。该属性有以下几个值：

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

  • object-fit: cover;
    被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。

  • object-fit: fill;
    被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。

  • object-fit: none;
    被替换的内容将保持其原有的尺寸，不伸缩。（可能导致图片在页面中非常大）

  • object-fit: scale-down;
    内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。

所以我们应该给图片添加object-fit: cover;属性，
并根据实际情况调整图片长宽，
别忘了给外面的框添加overflow: hidden;用来隐藏超出部分。

1
2
3
4
5
6
7
8
9
10
.box {
    height: 200px;
    width: 150px;
    overflow: hidden;
}
.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

参考内容：
[1] https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit