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

<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. 矩池云上如何快速安装tensorRT

    国内镜像 https://mirrors.cloud.tencent.com/nvidia-machine-learning/ubuntu1804/x86_64/ 检查系统版本 source /etc ...

  2. JS类型判断&原型链

    JS类型检测主要有四种 1.typeof Obj 2.L instanceof R 3.Object.prototype.toString.call/apply(); 4.Obj.constructo ...

  3. Java的jmap命令使用详解

    jmap命令简介 jmap(Java Virtual Machine Memory Map)是JDK提供的一个可以生成Java虚拟机的堆转储快照dump文件的命令行工具.除此以外,jmap命令还可以查 ...

  4. java 和groovy的混合使用

    在应用中,我们可以在一个Java类.一个Groovy类或者一个Groovy脚本中实现某个特定功能.之后可以在Java类.Groovy类或Groovy脚本中调用该功能. 在groovy 使用groovy ...

  5. Java案例——冒泡排序

    排序:将一组数据按照固定的规则进行排列 冒泡排序:一种排序方式,对将要排序的相邻的数据进行两两比较,将较大的放在后面,依次对所有的数据进行操作,直到所有的数据按要求完成排序 冒泡排序原理: 1.如果有 ...

  6. python 模块之 selenium 自动化使用教程

    一.安装 pip install Selenium 二.初始化浏览器 Chrome 是初始化谷歌浏览器 Firefox 是初始化火狐浏览器 Edge 是初始化IE浏览器 PhantomJS 是一个无界 ...

  7. xx局点FusionCloud6.3 type1 计算配额失败问题

    现象: 排查过程: 1.登录云平台部署面,选择部署资源-服务器 2.找到MOC-ManageOne-Service01.MOC-ManageOne-Service02两台机器ip地址. 3.用ssh工 ...

  8. 盘点几种DIY加密狗的制作方法,适用于穿越机模拟器

    前言 前几天笔者的加密狗在使用中突然坏掉了,现象是插电脑不识别,LED灯不亮. 网上很多模友也反映了同样的问题: http://bbs.5imx.com/forum.php?mod=viewthrea ...

  9. luoguP4859 已经没有什么好害怕的了(二项式反演)

    luoguP4859 已经没有什么好害怕的了(二项式反演) 祭奠天国的bzoj. luogu 题解时间 先特判 $ n - k $ 为奇数无解. 为了方便下记 $ m = ( n + k ) / 2 ...

  10. uoj310【UNR #2】黎明前的巧克力(FWT)

    uoj310[UNR #2]黎明前的巧克力(FWT) uoj 题解时间 对非零项极少的FWT的优化. 首先有个十分好想的DP: $ f[i][j] $ 表示考虑了前 $ i $ 个且异或和为 $ j ...