Skip to content

[css] 第100天 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子 #980

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
haizhilin2013 opened this issue Jul 24, 2019 · 9 comments
Open

[css] 第100天 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子 #980

haizhilin2013 opened this issue Jul 24, 2019 · 9 comments
Labels
css css

Comments

@haizhilin2013
Copy link
Collaborator

第100天 如何让大小不同的图片等比缩放不变形显示在固定大小的div里？写个例子
@haizhilin2013 haizhilin2013 added the css css label Jul 24, 2019
@xiangshuo1992
Copy link
Contributor

  1. 图片等比缩放 img{ object-fit: cover/contain;}

  2. div宽高比例固定，跟随屏幕变化而变化，利用padding垂直方向的属性来实现

@HCLQ
Copy link

HCLQ commented Jul 25, 2019 •
edited
Loading

图片设

max-width: 100%;
max-height: 100%;

div设

display: flex;
align-items: center;
jutify-content: center;

自适应缩放居中

扩展下一个完整的div包裹图片,在图片没加载完得时候坍缩现象
如果知道图片比例
包裹的div设padding-bottom: xx%; 如果16:9图片 那么这里就是 9/16%
因为padding是根据宽度自适应来设百分比的
可以图片absolute布局撑满div,
加载完前是padding撑起div

@xjt31012
Copy link

<div><img></div>

用定位的方式

div{width:100px;height:100px;position:relative;}

img{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;max-width:100px;max-height:100px}

用弹性布局

div{display:flex;justify-content:center;align-items:center;width:100px;height:100px;}

img{max-width:100px;max-height:100px;}

@nowherebutup
Copy link

  • img标签形式
  <style>
    .dv{
      width: 100px;
      height: 100px;
      border: 3px solid #f00;
      float: left;
      margin-right: 20px;
    }
    .dv img{
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="dv">
    <img src="./imgs/1.png" alt="">
  </div>
  <div class="dv">
    <img src="./imgs/2.png" alt="">
  </div>
  <div class="dv">
    <img src="./imgs/3.png" alt="">
  </div>
</body>
  • 背景图形式
  <style>
    .dv{
      width: 100px;
      height: 100px;
      border: 3px solid #f00;
      float: left;
      margin-right: 20px;
      background-repeat: no-repeat;
      background-size: contain;
    }
    .dv:nth-child(1){
      background-image: url('./imgs/1.png');
    }
    .dv:nth-child(2){
      background-image: url('./imgs/2.png');
    }
    .dv:nth-child(3){
      background-image: url('./imgs/3.png');
    }
  </style>
</head>
<body>
  <div class="dv">
  </div>
  <div class="dv">
  </div>
  <div class="dv">
  </div>
</body>

@SoftwareEngineerPalace
Copy link

好像没有答案

@xuxihua
Copy link

xuxihua commented Mar 21, 2020 •
edited
Loading 

<div><img><div>

img { width: 100%; object-fit: cover }

@haizhilin2013
Copy link
Collaborator Author

好像没有答案
想要啥答案呢？

@lizhesystem
Copy link 

<div><img><div>

img { width: 100%; object-fit: cover }

以前没用过object-fit，感觉挺方便的，少写好几行css 😂

@smile-2008
Copy link

  1. 图片等比缩放 img{ object-fit: cover/contain;}
  2. div宽高比例固定，跟随屏幕变化而变化，利用padding垂直方向的属性来实现

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css css
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@smile-2008 @haizhilin2013 @SoftwareEngineerPalace @HCLQ @xjt31012 @xiangshuo1992 @nowherebutup @lizhesystem @xuxihua