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 ...
随机推荐
- 怎么在 liunx 上安装docker
怎么在 liunx 上安装docker 作为一个非科班出身自学的小白,踩过很多的坑,特此留下记录 以下在虚拟机上示例 系统:linux(centos7) 操作方式:xshell连接终端操作 1.打开x ...
- Hadoop原生对象存储Ozone
Hadoop 社区推出了新一代分布式Key-value对象存储系统 Ozone,同时提供对象和文件访问的接口,从构架上解决了长久以来困扰HDFS的小文件问题.本文作为Ozone系列文章的第一篇,抛个砖 ...
- 纯css做三角形图标
以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...
- Net中事件的高级用法之三
1.事件的高级应用 使用事件可以解除代码耦合 2.事件高级应用实例 using System; using System.Collections.Generic; using System.Linq; ...
- ssh-ssl编译安装
升级前准备 #下载所需依赖包#yum install -y gcc gcc-c++ glibc make autoconf openssl openssl-devel pcre-devel pam-d ...
- 马哥教育Linux网络班结业考试(架构师)-简答题题目(附答案)
1.叙述 centos7 启动图形界面的开机启动流程? 答:新版本的CentOS7里,已经做了调整.具体/etc/inittab 文件的第7行已经做出了说明: 系统已经使用'targets' 取代了运 ...
- vue路由-router
VueRouter基础 vue路由的注册 导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"&g ...
- 知识点简单总结——FWT(快速沃尔什变换),FST(快速子集变换)
知识点简单总结--FWT(快速沃尔什变换),FST(快速子集变换) 闲话 博客园的markdown也太傻逼了吧. 快速沃尔什变换 位运算卷积 形如 $ f[ i ] = \sum\limits_{ j ...
- Kruscal algorithm
#include <iostream> #include <algorithm> using namespace std; #define MAX 5 #define INF ...
- Java使用多线程异步执行批量更新操作
import com.google.common.collect.Lists; import org.apache.commons.collections.CollectionUtils; impor ...