<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<div class="box">
<img class="img" src="http://img.yihuoyun.net/wxgoods/201911/27/wxgoods16eaa9eb5c9.jpg" />
</div>
<style>
.box {
height: 700px;
width: 700px;
}
.img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</html>
主要使用的是
object-fit cover
被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
网友评论