https://www.jb51.net/css/660677.html

经常有这样一个场景,需要让图片自适应容器的大小。

1、img标签的方式

我们马上就能想到,把width、height 设置为100%啊。来看一哈效果。

1
2
3
<div class='div1'>
    <img src="./peiqi.png" alt="">
</div>
1
2
3
4
5
6
7
8
9
10
11
.div1 {
    width:500px;
    height:400px;
    border:1px solid black;
}
.div1 img  {
    /*
    width: 100%;
    height:100%;
    */
}

这是正常的佩琪(如果图片比容器大的话,图片会超出容器)

1
2
3
4
5
6
7
8
9
.div1 {
    width:500px;
    height:400px;
    border:1px solid black;
}
.div1 img  {
    width: 100%;
    height:100%;
}

这是100%的佩琪

额,好像刚过完年。

虽然符合了自适应的要求,但是如图所见图片失真了。这种图片比容器小的情况强行将图片自适应的话图片就失真。如果说是单个图片(logo、占位图、等)按设计稿开发就可以了。但经常会遇到接口获取的不规则图片的情况,一般这种时候会将小于容器的话将其水平、垂直居中。
整理一下任务:

  • 图片宽高都小于容器时垂直、水平居中
  • 图片宽高都大于容器时保持宽高比将width或height充满容器
1
2
3
4
5
6
7
8
9
<div class='div1'>
     <img src="./peiqi.png" alt="">
 </div>
 <div class='div1'>
     <img src="./peiqi2.png" alt="">
 </div>
 <div class='div1'>
     <img src="./peiqi4.jpeg" alt="">
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.div1 {
      width:500px;
      height:400px;
      border:1px solid black;
      display: table-cell;
      vertical-align: middle;
  }
  .div1 img  {
      max-width: 100%;
      max-height: 100%;
      display: block;
      margin: auto;
  }

max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.

这种效果就舒服多了

2、背景图的方式

1
2
3
.div {
      background-size: contain;
  }

background-size: contain; 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

利用css的 background-size: contain; 属性就能进一步优化图片的宽高都小于容器的情况了。

上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
div {
      height: 400px;
      width: 500px;
      border: 1px solid black;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
  }
  .div1 {
      background-image: url(./peiqi1.png);
  }
  .div2 {
      background-image: url(./peiqi2.png);
  }
  .div3 {
      background-image: url(./peiqi4.jpeg);
  }
1
2
3
<div class='div1'></div>
  <div class='div2'></div>
  <div class='div3'></div>

当然最后还得看需求,产品是咋要求的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

 
 

CSS 图片自适应容器的更多相关文章

  1. 纯css 图片自适应居中

    html 结构 <div class="container"> <div class="content"></div> &l ...

  2. Css 图片自适应

    设置 CSS .container{ overflow:auto; } img{ width:100%; height:auto; overflow:hidden; } 设置 template < ...

  3. html5+css 图片自适应

    <div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;"> ...

  4. wpf让图片自适应容器大小,而且又不会拉升变形

    <Grid Grid.Column="3" Margin="0,4,0,0" Background="Black"> <V ...

  5. css利用padding百分比实现图片自适应高度

    应用场景 宽高比率,实现图片自适应高度,防止图片加载过程高度为0,加载完图片高度撑起,它下面的div抖动问题 重点:CSS百分比padding都是相对宽度计算的 <div class=" ...

  6. 【CSS小技巧】 用 CSS 实现一个宽高等比自适应容器

    不知道怎么起个标题能更加清楚的说清楚我的意图,那就打个比方吧:比如我们在手机端上放一张宽度 100% 的图片,我们如果不设置图片的高度,那么这个图片会根据图片的原始尺寸等比缩放.今天我们要讲的就是实现 ...

  7. css控制div下图片自适应解决方法:图片不超过最大宽度

    我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应.这个问题是很普遍的.在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问.为什么?原因很简单,我们不 ...

  8. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...

  9. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

随机推荐

  1. mysql 登录修改密码与数据库备份

    1.mysql首次登录修改密码 mysql -uroot -p(首次登录无密码,按回车即可:如果无法登陆,修改mysql配置文件,在[mysqld]最后一行加skip-grant-tables即可登录 ...

  2. 简单分析FactoryBean

    1. 什么是FactoryBean FactoryBean本质上是一种Bean,只是它可以产生其他的Bean,比较特殊.在上下文getBean的时候,如果传入FactoryBean的名称,得到的是Fa ...

  3. POJ 1789 Prim

    给定N个字符串,某个字符串转为另一个字符串的花费为他们每一位不相同的字符数. 求最小花费Q. Input 多组输入,以0结束. 保证N不超过2000. Output 每组输出"The hig ...

  4. thinkphp 4.8 漏洞测试

    首先要部署环境 这里利用docker的方便部署性,来直接找个现成的    git clone https://github.com/vulnspy/thinkphp-5.1.29.git 下载安装后, ...

  5. 3、详解 ESLint 规则 转自https://blog.csdn.net/bbsyi/article/details/88816637

    什么是 ESLint ? ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误.在许多方面,它和 JSLint.JSHi ...

  6. 深入理解Java自动装箱拆箱机制

    1.自动装箱与拆箱的定义 装箱就是自动将基本数据类型转换为包装器类型(int-->Integer): 拆箱就是自动将包装器类型转换为基本数据类型(Integer-->int). Java中 ...

  7. 个人学习HTML以及CSS所得体会

    拥有自己样式的浏览器: 苹果,欧朋,谷歌,IE,火狐 form标签<form></form> 表单属性: 1,action主要同来规定表单的作用,提交到处理器上面处理URL,默 ...

  8. zxx.cms.app 开发中的一些git命令

    第一行命令 查看当前项目git的状态 显示是干净的 第二行创建一个 login 分支 并且切换到login 分支 用于login功能模块的开发 第三行 查看当前 所有的 分支 安装less-loade ...

  9. 网页免费转换为可编辑的PDF

    Chrome自带的"打印"功能中,另存为PDF 可选择保存选中的内容.如果浏览器/网络出错,不能纠正.(推荐0) https://www.printfriendly.com (有C ...

  10. PPT 设置幻灯片母版

    现在我设计了一个PPT背景,我想新建幻灯片的时候,直接就是以这个背景展现,并把这个背景作用于左右的幻灯片. 1.选中第二页幻灯片,CTRL + C 复制一下 2.点击视图,幻灯片母版,背景样式,点击下 ...