图片自适应屏幕大小的css写法

2023-10-29

如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入

img {height: auto; width: auto\9; width:100%;}

用max-width设置如果图片尺寸大于当前浏览器尺寸就自动缩放, 图片的高度设置正比缩放, 但是ie8有个比较二的bug就是不支持max-width属性, 而ie7和ie9都支持.height:auto,相关元素的高度取决于浏览器。

代码如下

<img src="..." class="img-responsive" alt="响应式图像">

如果只想改特定的图片

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

图片自适应屏幕大小的css写法 的相关文章

  • 解析和校验Flink SQL语句

    Flink对SQL的支持是基于Apache Calcite实现的 且Flink包中集成了Apache Calcite 所以我们可以直接调用Flink包中的SQL解析类 来解析和校验我们的Flink SQL语句 import org apac
  • kettle--数据库间的数据迁移工具

    一 kettle介绍 kettle 是纯 java 开发 开源的 ETL工具 用于数据库间的数据迁移 可以在 Linux windows unix 中运行 有图形界面 通过图形化界面的配置 可以实现数据迁移 并不用开发代码 也有命令脚本还可
  • CTFShow web入门题刷题记录

    CTFShow web入门题刷题记录 信息搜集 web1 提示 开发注释未及时删除 打开网页查看源代码发现 flag flag 2b2cf8e3 f880 41e1 a8ff 02601b3d998f web2 提示 js前台拦截 无效操作
  • Linux安全--iptables详解

    目录 1 iptables介绍 2 iptables四表五链详解 3 iptables基本语法 4 实际操作 4 1 增加规则 4 2 删除规则 4 3 修改规则 5 命令语法总结 6 基本匹配条件 7 iptables进阶用法 7 1 i
  • 一个Debug版本不崩而Release版本可能崩的问题

    引子 今天一个朋友在QQ上向我求助 说他的一个MFC程序用VS2013编译生成的Debug版本运行正常 而编译生成的Release版本却在启动后还没出现界面便崩溃了 经过一番折腾之后 通过调试找到了崩溃点 但却根本不像是崩溃在这儿 因为崩溃
  • Struts标签基本知识

    Struts标签基本知识 1 普通标签 控制执行的流程 1 1 控制标签 实现分支 循环等流程控制 if elseif else append generator iterator merge sort subset 1 2 数据标签 输出
  • 区块链-密码学与安全技术

    密码学与安全技术 工程领域从来没有黑科技 密码学不仅是工程 密码学相关的安全技术在整个信息技术领域的重要地位无需多言 如果没有现代密码学和信息安全的研究成果 人类社会根本无法进入信息时代 区块链技术大量依赖了密码学和安全技术的研究成果 实际

随机推荐

  • C++基础知识 - 函数返回引用深度解析

    函数返回引用深度解析 C 引用使用时的难点 当函数返回值为引用时 若返回局部变量 不能成为其它引用的初始值 不能作为左值使用 返回静态变量 或 全局变量的引用 可成为其他引用的初始值 也可以作为左值 也可作为右值 返回函数的普通形参作为引用
  • Basic Level 1019 数字黑洞 (20分)

    题目 给定任一个各位数字不完全相同的 4 位正整数 如果我们先把 4 个数字按非递增排序 再按非递减排序 然后用第 1 个数字减第 2 个数字 将得到一个新的数字 一直重复这样做 我们很快会停在有 数字黑洞 之称的 6174 这个神奇的数字
  • Java实现微信小程序获取unionID

    前言 微信开发平台为开发者提供openId用来区分用户的唯一性 但是openId只是在独立的应用内是唯一的 如果开发者拥有多个移动应用 网站应用 和公众帐号 包括小程序 可通过 UnionID 来区分用户的唯一性 因为只要是同一个微信开放平
  • linux监控php脚本执行时间,在LINUX环境下定时执行php脚本

    1 使用Crontab定时执行linux环境下的php脚本文件 Cron 它是一个linux下的定时执行工具 根用户以外的用户可以使用 crontab 工具来配置 cron 任务 所有用户定义的 crontab 都被保存在 var spoo
  • springboot+vue实现ChatGPT逐字输出打字效果

    文章目录 前言 一 效果 二 Springboot后端 1 封装请求OpenAI接口的客户端 2 对话处理 3 对话请求接口 二 Vue前端 前言 在调用OpenAI GPT接口时 如果不使用流式 stream true 参数 接口会等待所
  • Centos7安装mysql遇到的问题

    使用yum y install mysql community server安装mysql时候提示 The GPG keys listed for the MySQL 5 7 Community Server repository are
  • AIX 下磁盘 I/O 性能分析

    转自 http www ibm com developerworks cn aix library 1203 weixy aixio 磁盘 I O 的概念 I O 的概念 从字义来理解就是输入输出 操作系统从上层到底层 各个层次之间均存在
  • 【SpringBoot】整合Kafka集群

    学习笔记 一 环境 二 maven引入 三 application配置 四 SpringBoot 生产者 五 SpringBoot 消费者 六 SpringBoot 主题分区 一 环境 使用Kafka3 0 0 master slave1
  • 解决mac中idea无法引入servlet-api包的问题

    1 虽然在pom文件中已经引入servlet api的依赖 如下
  • 14. 线性代数 - 线性方程组

    文章目录 线性方程组 矩阵 行列式 全排列和逆序数 N阶行列式 非 齐次线性方程 Hi 大家好 我是茶桁 结束了 微积分 部分的学习之后我们稍作休整 今天正式开始另外一部分 线性代数 的学习 小伙伴们放松完回来要开始紧张起来了 我们之前说过
  • Unity的C#编程教程_64_对象池 Object Pooling 详解及应用练习

    文章目录 Object Pooling Design Pattern Challenge Pool Manager Challenge Request from Pool Manager Recycle the Pool Object Po
  • QT 发布软件基本操作

    一 配置环境变量 找到Qt安装时的bin目录的路径 D Qt Qt5 14 2 5 14 2 mingw73 64 bin 将目录拷贝至下述环境变量中 打开计算机的高级系统设置 选中环境变量 gt 系统变量 gt Path 点击编辑 gt
  • javascript 将数组转换为字符串方法总结

    1 String arr 输出数组的每个元素值 用逗号分隔 2 arr join 分隔符 输出数组的每个元素之 用指定的分隔符分隔
  • 循环队列的实现(初始化、入队操作、出队操作、判满、判空、获取队头、队尾元素、销毁操作)

    typedef struct int array int front int rear int count 用count 的方式判断循环队列是否满 int N 总个数 MyCircularQueue 初始化 MyCircularQueue
  • 宝塔面板最全最快搭建https访问网站终极版教程

    我的个人博客 网址 https www minikuba com 迷你酷吧是一个基于程序员经验为基础分享技术文章 算法解题 大厂面试真题 热门项目的平台 致力于为大家提供更多涵盖前后端技术 技能的学习 助力广大热衷编程开发者全面发展 本文章
  • 动态集合和静态集合的不同

    ul li 1 li li 2 li li 3 li li 4 li li 5 li li 6 li ul
  • 铰接式车辆的横向动力学仿真提供车辆模型研究(Matlab代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 铰接式车辆是一种具有铰接连接的多体系统 具
  • 【乌拉喵.教程】不同负载下继电器的保护电路设计(解决继电器触点粘接的问题)

    最近将多年来收集到的教学视频 国内外图书 源码等整理整合拿出来 涉及arm Linux python 信号完整性 FPFA DSP 算法 stm32 单片机 制图 电子模块 kali 出版社图书等 资料目前约1 5TB 详情 1 5TB 电
  • 当Selenium遇到TestNG

    当Selenium遇到TestNG 用 Selenium 测试 Web 页面时 所重现的各种行为依赖于测试人员的输入参数 例如 选择下拉餐单的项目 在文本框中输入字符等 不同的测试用例对应不同的输入 若有方法能够简单 有效的传入测试用参数
  • 图片自适应屏幕大小的css写法

    如果想让图片自适应屏幕的小而不是宽高固定不变可以在css代码里加入 img height auto width auto 9 width 100 用max width设置如果图片尺寸大于当前浏览器尺寸就自动缩放 图片的高度设置正比缩放 但是