关于Img标签在固定宽高的容器内部以图片比例缩放存在

写这篇文章对自己的想法做一些总结等

起因: 下载一些素材的时候看到排版方式是（下图）的样子，而且图片基本上都是没有变形，扭曲 就产生了"兴趣",看了看源码 又自己想了几种方式方法;

这个源代码采用JS遍历的方式对每一个图片进行布局

而我打算采用  CSS进行图片的样式布局（暂时只想到了三种方式）

（1）父级相对定位，子级 绝对定位 设置图片居中等比显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试1111111</title>
  <style>
    *{margin:0;padding:0;}
    
    div{
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      margin-left: 15px;
      margin-bottom: 15px;
      float: left;

      overflow: hidden;
      position: relative;
    }

    div img {
      position: absolute;
      max-width: 100%;

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto; /* 设置四个值为零,margin:auto;可以设置元素水平垂直居中 */
    }
    
  </style>
</head>
<body>
  <div><img src="./images/kul.jpg" alt=""></div>
  <div><img src="./images/lf.png" alt=""></div>
  <div><img src="./images/timg (1).jpg" alt=""></div>
</body>
</html>

（2）采用 img 标签为行内快的特性进行等比

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试222222</title>
  <style>
    *{margin:0;padding:0;}
    
    div{
      width: 200px;
      height: 200px;
      line-height: 200px;
      border: 1px solid #000;
      margin-left: 15px;
      margin-bottom: 15px;
      float: left;
      text-align: center;
      overflow: hidden;
    }
    div img {
      /*采用行内块的特性进行图片的垂直居中特性 
        图片设置最大宽度和最小宽度;
        vertical-align--> 文字对齐方式采用middle 居中
      */
      max-width: 200px;
      max-height: 200px;
      vertical-align: middle;
    }
    
  </style>
</head>
<body>
  <div><img src="./images/kul.jpg" alt=""></div>
  <div><img src="./images/lf.png" alt=""></div>
  <div><img src="./images/timg (1).jpg" alt=""></div>
</body>
</html>

（3）采用 object-fit && object-position 的方式进行布局；

这第三种方式我也是在网上找了一些资料查阅对这两个属性不清楚的同学可以查看张鑫旭大佬个人博客章节

半深入理解CSS3 object-position/object-fit属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>测试3333333</title>
  <style>
    *{margin:0;padding:0;}
    div{
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      margin-left: 15px;
      margin-bottom: 15px;
      float: left;
      overflow: hidden;
      position: relative;
    }
    div img {
      /* 宽高100%
        设置的是 IMG 标签的  关于 内容src的宽高属性会根据内容自动填充,会产生不完整的现象
      */
      width: 100%;
      height: 100%;
      object-fit:none;  /* 默认情况显示 */
      object-position: center;  /* 图片内容采用 center 方式进行居中 */
    }
  </style>
</head>
<body>
  <div><img src="./images/kul.jpg" alt=""></div>
  <div><img src="./images/lf.png" alt=""></div>
  <div><img src="./images/timg (1).jpg" alt=""></div>
</body>
</html>

当然 这三种方法也只是我个人的偏见、有什么不对的地方请私聊我

Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生