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

<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. 专业3 Cookie 和Session的使用及原理

    Cookie的使用及原理 什么是cookie cookie是一种用来跟踪和识别用户上网信息的会话控制技术,它将跟踪后的信息存储在客户端的浏览器上 cookie如何使用 第一步:设置cookie即可(告 ...

  2. tp5 (自写) 实现redis消息队列 + 排行榜

    1:小皮开启redis, 控制器按Ctrl 点击new Redis 进入 redis.php 进行封装 //向队列添加数据 // LPUSH key value1 [value2] //将一个或多个值 ...

  3. Applied Social Network Analysis in Python 相关笔记3

    如果是option2的话,答案选A. 这里节点s,从左边的选择,节点t从右边选择. 这里计算还是用以前的值,不用更新过的值.

  4. CF1106F题解

    居然没人写常系数齐次线性递推/jy 题意明确. 首先我们注意到这个系数是在幂上面的,这道题的各种信息都是建立在乘法上的,十分不好处理,考虑求一个 \(\ln\) 将这些信息建立在加法上. \[\ln ...

  5. AT1219题解

    题意 设 \(a\) 的价值为 \(a \times cnt_a\)(\(cnt_a\) 为 \(a\) 在区间中出现的次数),求区间种某种元素,使得这种元素的价值最大. 因为设计出现元素的次数,所以 ...

  6. Python 基础知识自检,离深入掌握 Python 还有多远

    1. 模块化编程思想 模块化编程是 Python 的基本思想.初学 Python,都应该使用过小海龟.随机.数学模块.使用模块之前,需要导入模块,然后根据自己的问题需要使用这些模块. Python 提 ...

  7. ActiveX 是什么,和IE什么关系

    在推出25年多以后,IE浏览器终于要退役了. 据外媒报道,微软决定自2022年6月15日起,让IE浏览器彻底退出互联网舞台,并全面改用Microsoft Edge浏览器. 关于IE的历史可以参考这篇文 ...

  8. 【KiCad镜像】下载与安装

    镜像下载.域名解析.时间同步请点击 阿里云开源镜像站 一.KiCad介绍 KiCad EDA 是一款用于印刷电路板设计的开源自由软件,基于 GPLv3 开源协议. 软件包含工程项目管理.原理图设计.线 ...

  9. CVE-2017-11882(Office远程代码执行)

    测试环境:win7+kali+office 2007 xp+kali+office 2003 win7 ip:10.10.1.144 xp ip: 10.10.1.126 kali ip 10.10. ...

  10. maltego的基本使用

    首次使用maltego需要注册 注册网站:https://www.paterva.com/web7/buy/maltego-clients/maltego-ce.php 填写好点注册就行了 1. 打开 ...