不裁剪的方案
1、指定容器内等比例缩放,并控制中上下左右居中(小图拉伸)
1.1 效果
1.2代码
<!html>
<head>
<meta charset="utf-8">
<title> css3 图片等比缩放,居中显示 </title>
<style>
.mysec {
width: 200px;
height: 200px;
border: solid 1px #ccc;
background-color: rgb(157, 234, 240);
background-origin: content;
/*从content区域开始显示背景*/
background-position: 50% 50%;
/*图片上下左右居中*/
background-size: contain;
/*保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域*/
background-repeat: no-repeat;
/*图像不重复显示*/
}
</style>
</head>
<body>
<section class="mysec" style=" background-image:url('https://picsum.photos/800/400');"></section>
<section class="mysec" style=" background-image:url('https://picsum.photos/400/800');"></section>
<section class="mysec" style=" background-image:url('https://picsum.photos/400/400');"></section>
<section class="mysec" style=" background-image:url('https://picsum.photos/100/100');"></section>
</body>
</html>
2、使用img,transform+position(小图不拉伸)
2.1效果
2.2代码
<html>
<body>
<div class="border" >
<div class="img-border">
<img src="https://picsum.photos/900/900" alt="">
</div>
</div>
<div class="border">
<div class="img-border">
<img src="https://picsum.photos/200/900" alt="">
</div>
</div>
<div class="border">
<div class="img-border">
<img src="https://picsum.photos/100/100" alt="">
</div>
</div>
<div class="border">
<div class="img-border">
<img src="https://picsum.photos/1200/400" alt="">
</div>
</div>
<style>
.border {
width: 200px;
height: 200px;
position: relative;
}
.img-border {
width: 200px;
height: 200px;
border: 2px solid;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
img {
max-width: 100%;
max-height: 100%;
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
}
</style>
</body>
</html>
position | |
---|---|
static | 该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。 |
relative | 该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白.position:relative 对 table-*-group, table-row, table-column, table-cell, table-caption 元素无效。 |
absolute | 元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins),且不会与其他边距合并。 |
fixed | 元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform, perspective 或 filter 属性非 none 时,容器由视口改为该祖先。 |
sticky | 元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于top, right, bottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。 |
裁剪的方案
3、 background-size: cover
3.1效果
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 这是第一种实现。
3.2代码
<html>
<body>
<div style="margin: 20px; display: flex;justify-content: center;">
<div class="cover" style=" background-image: url('https://picsum.photos/200/500');"></div>
<div class="cover" style=" background-image: url('https://picsum.photos/500/200');"></div>
<div class="cover" style=" background-image: url('https://picsum.photos/400/400');"></div>
<div class="cover" style=" background-image: url('https://picsum.photos/50/50');"></div>
</div>
<div style="margin: 20px; display: flex;justify-content: center;">
<div class="contain" style=" background-image: url('https://picsum.photos/200/500');"></div>
<div class="contain" style=" background-image: url('https://picsum.photos/500/200');"></div>
<div class="contain" style=" background-image: url('https://picsum.photos/400/400');"></div>
<div class="contain" style=" background-image: url('https://picsum.photos/50/50');"></div>
</div>
<style>
.cover {
border: 1px solid;
width: 150px;
height: 100px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.contain {
border: 1px solid;
width: 150px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
</style>
<script>
</script>
</body>
</html>
4、object-fit: cover
4.1效果
object-fit CSS 的值有以下几种:
contain:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。和backgroud-size属性的contain类似,只是多了黑边。
cover:被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。和background-size属性的cover类似。
fill:被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。相当于固定宽高下未做任何调整的样式。
none:被替换的内容尺寸不会被改变。
scale-down:内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸。
4.2代码
<html>
<body >
<div style="margin: 20px; display: flex;justify-content: center;">
<div class="border">
<img class="contain" src="https://picsum.photos/900/900" alt="">
</div>
<div class="border">
<img class="contain" src="https://picsum.photos/200/900" alt="">
</div>
<div class="border">
<img class="contain" src="https://picsum.photos/100/100" alt="">
</div>
<div class="border">
<img class="contain" src="https://picsum.photos/1200/400" alt="">
</div>
</div>
<div style="margin: 20px; display: flex;justify-content: center;">
<div class="border">
<img class="cover" src="https://picsum.photos/900/900" alt="">
</div>
<div class="border">
<img class="cover" src="https://picsum.photos/200/900" alt="">
</div>
<div class="border">
<img class="cover" src="https://picsum.photos/100/100" alt="">
</div>
<div class="border">
<img class="cover" src="https://picsum.photos/1200/400" alt="">
</div>
</div>
<style>
.border {
width: 200px;
height: 200px;
border: 1px solid;
}
.cover {
object-fit: cover;
width: 200px;
height: 200px;
}
.contain {
object-fit: contain;
width: 200px;
height: 200px;
}
</style>
</body>
</html>
5、overflow:hidden(简陋)
5.1效果
5.2代码
<html>
<body>
<div style="margin: 20px; display: flex;justify-content: center;">
<div class="border">
<img class="" src="https://picsum.photos/900/900" alt="">
</div>
<div class="border">
<img class="" src="https://picsum.photos/200/900" alt="">
</div>
<div class="border">
<img class="" src="https://picsum.photos/100/100" alt="">
</div>
<div class="border">
<img class="" src="https://picsum.photos/1200/400" alt="">
</div>
</div>
<div style="margin: 20px; display: flex;justify-content: center;">
<div class="border">
<img class="absolute" src="https://picsum.photos/900/900" alt="">
</div>
<div class="border">
<img class="absolute" src="https://picsum.photos/200/900" alt="">
</div>
<div class="border">
<img class="absolute" src="https://picsum.photos/100/100" alt="">
</div>
<div class="border">
<img class="absolute" src="https://picsum.photos/1200/400" alt="">
</div>
</div>
<style>
.border {
border: 1px solid;
width: 300px;
height: 200px;
display: block;
position: relative;
overflow: hidden;
}
.absolute {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
</body>
</html>