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. 如何使用RedisTemplate访问Redis数据结构之Hash

    Redis的Hash数据机构 Redis的散列可以让用户将多个键值对存储到一个Redis键里面. public interface HashOperations<H,HK,HV> Hash ...

  2. 内存溢出,内存泄漏,CPU溢出区别

    内存溢出 out of memory,就是你要的内存空间超过了系统实际分配给你的空间,此时系统相当于没法满足你的需求,就会报内存溢出的错误 内存泄漏是指你向系统申请分配内存进行使用(new),可是使用 ...

  3. 测试工作小工具~总结&下载连接

    1.Gif录制小工具(动图提单 ≖ᴗ≖) 地址:https://licecap.en.softonic.com/download

  4. GAN——ModeCollapse

    GAN——ModeCollapse 2017年05月21日 13:54:31 LiuSpark 阅读数 6821更多 分类专栏: 机器学习   版权声明:本文为博主原创文章,遵循CC 4.0 BY-S ...

  5. Java String类源码

    String类的签名(JDK 8): public final class String implements java.io.Serializable, Comparable<String&g ...

  6. 3037 插板法+lucas

    先说下lucas定理 1)Lucas定理:p为素数,则有: (2)证明: n=(ak...a2,a1,a0)p = (ak...a2,a1)p*p + a0 =  [n/p]*p+a0 (注意 这里( ...

  7. pat L2_004

    一棵二叉搜索树可被递归地定义为具有下列性质的二叉树:对于任一结点, 其左子树中所有结点的键值小于该结点的键值: 其右子树中所有结点的键值大于等于该结点的键值: 其左右子树都是二叉搜索树. 所谓二叉搜索 ...

  8. [http]HTTP请求过程

    我们在浏览器输入http://www.baidu.com想要进入百度首页,但是这是个域名,没法准确定位到服务器的位置,所以需要通过域名解析,把域名解析成对应的ip地址,然后通过ip地址查找目的主机.整 ...

  9. javascript数字格式化通用类——accounting.js使用

    简介 accounting.js 是一个非常小的JavaScript方法库用于对数字,金额和货币进行格式化.并提供可选的Excel风格列渲染.它没有依赖任何JS框架.货币符号等可以按需求进行定制. 代 ...

  10. XML模块与类的定义

    xml模块 xml介绍: --XML 全称  可扩展标记语言 --<tag></tag>  双标签   标签中间可以加入文本信息 --<tag/>单标签  没有文本 ...