CSS 图片等比缩放和拉伸

一、代码

<template><div><!-- 等比缩放 --><div>            <div class="img-div"><img class="img-01" src="@images/image02.jpg" ></div>        <div class="img-div"><img class="img-01" src="@images/image01.jpg" ></div></div><!-- 平铺占满 --><div><div class="img-div"><img class="img-02" src="@images/image01.jpg" ></div><div class="img-div"><img class="img-02" src="@images/image02.jpg" ></div></div></div>
</template>
<style scoped>
.img-div {margin: 20px;display: inline-block;width: 450px;height: 350px;background: #ccc;    position: relative;/* 使img水平垂直居中 */
}
/* 等比缩放，且水平垂直居中 */
.img-01 {width: auto; height: auto; max-width:100%; max-height:100%; position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);
}
/* 平铺 */
.img-02{width: 100%;height: 100%;
}
</style>

二、效果

1、等比缩放，且水平垂直居中

2、拉框占满

三、知识点

平铺

img {width: auto; height: auto; max-width:100%; max-height:100%;
}

等比缩放的水平垂直居中

div{position: relative;
}
img{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);
}

拉伸占满

img {width: 100%; height: 100%;
}

CSS 图片等比缩放和拉伸相关推荐

html图片缩放6,四款css 图片按比例缩放实例(兼容ie6,7,firefox)
使用max-width,max-height:或者min-width,min-height的css属性即可.如: 代码如下 img{max-width:100px;max-height:100px;} ...
CSS图片定比例缩放
文章目录前言一.图片定比例缩放方案 1.padding(推荐) 2.根据width设置height 二.图片的路径设置height百分比无效前言一张banner图,在不同的屏幕上铺满宽度与 ...
css图片自动裁剪居中不拉伸自适应
如图红框内是展示的内容,红框外的色域是被裁掉的部分父元素宽高固定的情况下,图片子元素css代码如下: img {height: 100%;width: 100%;object-fit: cover ...
CSS实现图片以中心缩放
CSS图片以中心缩放.放大,超出隐藏 layui轮播图  <div class="layui-carousel wzg-carousel" ...
html图片等比例拉伸,CSS控制图片等比例缩放
我们经常会需要把用户上传的图片等比例缩放在我们的网页上显示,下面我来介绍利用css控制图片比例缩放与javascript实现的方法,有需要了解的朋友可参考参考. 按比例缩小或者放大到某个尺寸,对于标准 ...
html中如何等比缩小图片,css如何将图片等比缩放
css将图片等比缩放的方法:可以利用object-fit属性来实现,如[object-fit: cover;].object-fit属性指定元素的内容应该如何去适应指定容器的高度和宽度. 属性介绍: ...
CSS实战笔记(十二) 图片等比例缩放
1.背景在网页展示图片是一个很常见的需求,大多数情况下,展示区域的大小是固定的,原图片的大小也是固定的如果展示区域的宽高和原图片的宽高不等比例,那么在默认情况下很可能会压缩或拉伸图片以适应区域大小 ...
[css] 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子
[css] 如何让大小不同的图片等比缩放不变形显示在固定大小的div里?写个例子图片等比缩放 img{ object-fit: cover/contain;}div宽高比例固定,跟随屏幕变化而变化, ...
[css] css图片缩放失真出现锯齿的如何解决呢？
[css] css图片缩放失真出现锯齿的如何解决呢? 1.-ms-interpolation-mode,这是针对IE的解决方案.其值设置为bicubic. 2.image-rendering,这是提供 ...

CSS 图片等比缩放和拉伸

一、代码

二、效果

三、知识点

CSS 图片等比缩放和拉伸相关推荐

最新文章

热门文章