资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css实现图片自适应容器的几种方式

css实现图片自适应容器的几种方式

el09xccxy / 1079人阅读

摘要：实现图片自适应容器经常有这样一个场景，需要让图片自适应容器的大小。虽然符合了自适应的要求，但是如图所见图片失真了。这种图片比容器小的情况强行将图片自适应的话图片就失真。利用的属性就能进一步优化图片的宽高都小于容器的情况了。

css实现图片自适应容器

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

1、img标签的方式

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

</>复制代码 
  2.     
</>复制代码 
  1. .div1 {
  2.     width:500px;
  3.     height:400px;
  4.     border:1px solid black;
  5. }
  6. .div1 img  {
  7.     /*
  8.     width: 100%;
  9.     height:100%;
  10.     */
  11. }


这是正常的佩琪（如果图片比容器大的话，图片会超出容器）

</>复制代码 
  1. .div1 {
  2.     width:500px;
  3.     height:400px;
  4.     border:1px solid black;
  5. }
  6. .div1 img  {
  7.     width: 100%;
  8.     height:100%;
  9. }


这是100%的佩琪

额，好像刚过完年。

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

图片宽高都小于容器时垂直、水平居中

图片宽高都大于容器时保持宽高比将width或height充满容器

</>复制代码 
  1.     
  2.         
  3.     
  4.     
  5.         
  6.     
  7.     
  8.         
  9.     
</>复制代码 
  1.     .div1 {
  2.         width:500px;
  3.         height:400px;
  4.         border:1px solid black;
  5.         display: table-cell;
  6.         vertical-align: middle;
  7.     }
  8.     .div1 img  {
  9.         max-width: 100%;
  10.         max-height: 100%;
  11.         display: block;
  12.         margin: auto;
  13.     }
</>复制代码 
  1. max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
    max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.


这种效果就舒服多了

2、背景图的方式 
</>复制代码 
  1.     .div {
  2.         background-size: contain;
  3.     }
</>复制代码 
  1. background-size: contain; 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
    利用css的 background-size: contain; 属性就能进一步优化图片的宽高都小于容器的情况了。

上代码

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

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

GPU云服务器 云服务器 css图片自适应 js继承的几种方式 服务器请求的几种方式 java创建对象的几种方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53741.html

相关文章

  • css实现图片自适应容器的几种方式

    摘要：实现图片自适应容器经常有这样一个场景，需要让图片自适应容器的大小。虽然符合了自适应的要求，但是如图所见图片失真了。这种图片比容器小的情况强行将图片自适应的话图片就失真。利用的属性就能进一步优化图片的宽高都小于容器的情况了。 css实现图片自适应容器 经常有这样一个场景，需要让图片自适应容器的大小。 1、img标签的方式 我们马上就能想到，把width、height 设置为100%啊。来...

    阿罗 评论0 收藏0

  • css实现图片自适应容器的几种方式

    摘要：实现图片自适应容器经常有这样一个场景，需要让图片自适应容器的大小。虽然符合了自适应的要求，但是如图所见图片失真了。这种图片比容器小的情况强行将图片自适应的话图片就失真。利用的属性就能进一步优化图片的宽高都小于容器的情况了。 css实现图片自适应容器 经常有这样一个场景，需要让图片自适应容器的大小。 1、img标签的方式 我们马上就能想到，把width、height 设置为100%啊。来...

    Yangder 评论0 收藏0

  • 几种常见的CSS布局

    摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

    FuisonDesign 评论0 收藏0

  • 几种常见的CSS布局

    摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。 本文概要 本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

    andot 评论0 收藏0

发表评论

登陆后可评论

0条评论

el09xccxy

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<