给新手的福利,还是记一下吧.......很简单

<div>
<img src="1.jpg" alt="">
</div> div{
width: 100px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
} img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}

(普及知识: 小程序更简单(使图片的长边能完全显示出来)  直接修改  mode值)

css设置图片根据最大边自适应的更多相关文章

  1. css设置图片居中、居左、居右

      CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...

  2. (转) JAVA中如何设置图片(图标)自适应Jlable等组件的大小

    一.问题: 一个程序,组件上设置某个图片作为图标,因为的label(应该说是组件)已经设定了固定大小, 所以再打开一些大图片时,超过组件大小的部分没显示出来,而小图片又没填充完整个组件 二.解决这个问 ...

  3. CSS设置图片垂直居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  4. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  5. css设置图片水平及垂直居中

    .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:cen ...

  6. 关于HTML+CSS设置图片居中的方法

    有的时候我们会遇到这样一个问题,就是当我们按下F12进行使用firebug调试的时候,我们发现图像没有居中,页面底下有横向的滑动条出现,图片没能够居中,默认状态下只是紧靠在页面最左侧,而我们对图像缩小 ...

  7. css设置图片的透明度

    在图片的属性中加上{filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;}   opacity是 ...

  8. css设置图片百分比显示,最简洁的代码

    css代码: .img-box { padding-bottom: 100%; } .img-box img { position: absolute; top:; bottom:; left:; r ...

  9. css设置图片的高等于图片的高

    <div class="box"> <img src="img/2222.jpg" /> </div> .box { pos ...

随机推荐

  1. python+selenium+pycharm使用

    上一章节讲了安装python及selenium,该章节讲解下使用pycharm编辑器进行代码编写 下载地址:http://www.jetbrains.com/pycharm/download/#sec ...

  2. 解决 Vue 项目 invalid host header 问题(两种方案)

    问题出现背景 做微信H5网页时,使用花生壳内网穿透进行调试时,打开网页显示:invalid host header 分析问题 这句话的意思是:无效的Host请求头: 因为在vue在调试时相当于启动了一 ...

  3. C++ STL vector扩容原理分析

    扩容特点: 1)新增元素:vector通过一个连续的数组存放元素,如果集合已满,在新增数据的时候,就要分配一块更大的内存,将原来的数据复制过来,释放之前的内存,在插入新增的元素: 2)对vector的 ...

  4. 31 面向对象编程 接口 普通类:只有具体实现 声明类的关键字是class,声明接口关键字是interface 接口的作用

    接口 概念 普通类:只有具体实现 抽象类:具体实现和规范(抽象方法)都有! 接口:只有规范!自己无法写方法!专业的约束!约束和实现分离:面向接口编程~ 接口就是规范,定义的是一组规则,体现了现实世界中 ...

  5. 【黑马程序员C++ STL】学习记录

    黑马程序员 2017 C++ STL 教程(STL 部分已完结) 基于黑马STL课程整理:黑马程序员2017C++STL教程 视频链接 专栏:本STL专栏目录 文章目录 黑马程序员 2017 C++ ...

  6. 消息中间件-RabbitMq相关概念及原理介绍【图文并茂】

    消息中间件 消息中间件的作用 解耦:消息中间件在服务之间插入了一个隐含的.基于数据的接口层.两边的服务处理过程都要实现这一接口,这允许我们独立的扩展或修改两边的处理过程,只要确保他们遵守相同的规范约束 ...

  7. Fiddler——抓取https接口配置(web,安卓,ios)

    作为一名合格的测试怎么能不会抓包呢.   抓包适用场景:   测试某个功能时,出现了bug,这时我们便需要抓包看一下这个bug到底是前端的还是服务端的: bug的精准指向,能加速bug得以解决.   ...

  8. Linux安全加固手册

    1      身份鉴别 1.1         密码安全策略 操作系统和数据库系统管理用户身份鉴别信息应具有不易被冒用的特点,口令应有复杂度要求并定期更换. 设置有效的密码策略,防止攻击者破解出密码 ...

  9. sum 函数语法与应用

    一.sum 函数语法: SELECT SUM(expression )   FROM tables    WHERE predicates; expression 常量.列或函数,或者是算术.按位与字 ...

  10. java高级用法之:调用本地方法的利器JNA

    目录 简介 JNA初探 JNA加载native lib的流程 本地方法中的结构体参数 总结 简介 JAVA是可以调用本地方法的,官方提供的调用方式叫做JNI,全称叫做java native inter ...