css设置图片根据最大边自适应
给新手的福利,还是记一下吧.......很简单

<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设置图片根据最大边自适应的更多相关文章
- css设置图片居中、居左、居右
CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...
- (转) JAVA中如何设置图片(图标)自适应Jlable等组件的大小
一.问题: 一个程序,组件上设置某个图片作为图标,因为的label(应该说是组件)已经设定了固定大小, 所以再打开一些大图片时,超过组件大小的部分没显示出来,而小图片又没填充完整个组件 二.解决这个问 ...
- CSS设置图片垂直居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
- CSS设置图片居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
- css设置图片水平及垂直居中
.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:cen ...
- 关于HTML+CSS设置图片居中的方法
有的时候我们会遇到这样一个问题,就是当我们按下F12进行使用firebug调试的时候,我们发现图像没有居中,页面底下有横向的滑动条出现,图片没能够居中,默认状态下只是紧靠在页面最左侧,而我们对图像缩小 ...
- css设置图片的透明度
在图片的属性中加上{filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;} opacity是 ...
- css设置图片百分比显示,最简洁的代码
css代码: .img-box { padding-bottom: 100%; } .img-box img { position: absolute; top:; bottom:; left:; r ...
- css设置图片的高等于图片的高
<div class="box"> <img src="img/2222.jpg" /> </div> .box { pos ...
随机推荐
- php简易表单及下拉框动态渲染
<?php//1.连接数据库$link = mysqli_connect('127.0.0.1','root','root','1906');//2.设置字符集mysqli_set_charse ...
- Guava中这些Map的骚操作,让我的代码量减少了50%
原创:微信公众号 码农参上,欢迎分享,转载请保留出处. Guava是google公司开发的一款Java类库扩展工具包,内含了丰富的API,涵盖了集合.缓存.并发.I/O等多个方面.使用这些API一方面 ...
- sql server数据库如何存储数组,int[]float[]double[]数组存储到数据库方法
原文地址:https://www.zhaimaojun.top/Note/5475296 将数组存储到数据库的方法 (本人平时同csharp编写代码,所以本文中代码都是csharp代码,有些地方jav ...
- tensorflow源码解析之common_runtime-device
目录 核心概念 device device_factory device_mgr device_set 1. 核心概念 在framework部分,我们介绍了DeviceAttributes和Devic ...
- HCIE数据挖掘笔记-005数据挖掘专业名词
数据对象和属性类别: 数据一般有噪声,数量庞大,且来自不同的数据源 数据集由数据对象组成,一个数据对象代表一个实体 数据对象:样本.实例.数据点.对象 数据对象以数据元组的形式存放在数据库中,数据库的 ...
- 『德不孤』Pytest框架 — 14、Pytest中的conftest.py文件
目录 1.conftest.py文件介绍 2.conftest.py的注意事项 3.conftest.py的使用 4.不同位置conftest.py文件的优先级 5.conftest.py中Fixtu ...
- 关于linux命令的随笔第一篇
大多数的情况下,我们都是通过ssh客户端远程连接服务器去进行维护访问,所以我们必须要掌握linux命令 linux命令大约有上百种,但是并非所有命令都属于常用命令,所以不需要死记硬背,多用多百度就可以 ...
- margin 塌陷bug 触发bfc
1.bfc block format context 2.如何触发一个盒子的bfc position:absolute; display: inline-block float:left/right; ...
- 前端面试题(js)
js 基础面试题 css 面试题 js 面试题 JavaScript 有几种类型的值?,你能画一下他们的内存图吗 原始数据类型(Undefined,Null,Boolean,Number.String ...
- 5种常见的Docker Compose错误
在构建一个容器化应用程序时,开发人员需要一种方法来引导他们正在使用的容器去测试其代码.虽然有几种方法可以做到这一点,但 Docker Compose 是最流行的选择之一.它让你可以轻松指定开发期间要引 ...