css 图片居中放大,不同比例图片居中缩放显示的三种方法

效果

方法一动态给img标签src属性赋值来达到传入不同比例的图片时始终等比例缩放显示，兼容性最好

HTML代码

复制代码

CSS代码

.img-box{

/*限定图片盒子宽高*/

width:500px;

height:500px;

}

img{

width:auto;

height:auto;

max-width:100%;

max-height:100%;

/*不定宽高的图片居中显示*/

position: relative;

top:50%;

left:50%;

transform:translate(-50%,-50%)

}复制代码

方法二动态设置图片展示区域的背景图background-image来达到不同比例图片时始终等比例缩放显示

HTML代码

CSS代码

.img-box{

/*限定宽高*/

width: 500px;

height: 500px;

background-image: url('...');

/*水平垂直居中*/

background-repeat: no-repeat;

background-size: contain;

background-position: center;}复制代码

方法三直接赋值img标签的src属性即可，最简单但低版本兼容性差

HTML代码

复制代码

CSS代码

img{

/*限定宽高*/

width:500px

height:500px;

object-fit:contain

}复制代码

object-fit这个属性决定了像img、video等替换元素的内容应该如何使用他的宽度和高度来填充其容器。

css 图片居中放大,不同比例图片居中缩放显示的三种方法相关推荐

使一个div居中显示的三种方法
使一个div居中显示的三种方法 1. <!DOCTYPE html> <html lang="en"> <head><meta chars ...
html这一段div居中显示,使一个div居中显示的三种方法
使一个我自址哈这工边识框处己按后大都加控不架的div居中显示比抖朋要插支一圈不者地器享说几的三种方法 1. div居中 /*第一种方法*/ div{ width: 200px; height: 200 ...
让图片在div里居中（三种方法）
问题当我们将一张 img 放在一个 div 里的时候,具有超高审美的我们,硬是要将 img 居中于 div.所以,产什么以下解决方法. 解决方法布局文件代码 <div class=&quo ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
html盒子居中的方式,CSS盒子居中三种方法
前言 CSS盒子居中,我觉得是很有必要学习一下的.特别是第三种方法,奇淫技巧升级版,也是生产环境中非常常见的一种方法,不需要知道宽度,随着祖先元素的变化而变化! 1.常规方法常规方法只需要给盒子设置 ...
ppt矩形里面的图片怎么放大缩小_PPT图片如何点击放大
PPT图片如何点击放大 [提要]<[电脑]PPT中图片点击放大效果的实现>由小编收集整理的,谨供需要实现电脑的朋友参考.内容如下: 用PPT做产品展示时,我们需要让观众看清楚细节.但同时又 ...
如何放大图片，教您三种方法！
在日常生活中,我们经常会对一些尺寸不符合的照片进行放大处理,在这里我们就需要一些特殊的方法,接下来我们介绍三种方法. 最懒的方法:直接拉伸小图截取简易程度:★★★★★ 图片质量:★ 适用人群:只需要 ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
css中div居中显示的四种方法
css中设置div元素居中显示的四种方法一.先确定div的基本样式二.具体实现方法第一种:利用子绝父相和margin: auto实现第二种:利用子绝父相和过渡动画tranform实现第三种: ...

css 图片居中放大,不同比例图片居中缩放显示的三种方法

css 图片居中放大,不同比例图片居中缩放显示的三种方法相关推荐

最新文章

热门文章