div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决。
解决方法有两种:
第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形。
比如淘宝,要求店铺主上传产品封面图片是正方形的,为什么,因为图片宝贝展示列表都是正方形的排版布局,这样要求上传合适正方形宝贝封面图片,也是让图片不变形。
所以有条件的情况下,大家将首页、图片列表页的布局宽度高度保持一致,上传图片时候将图片先进行处理为布局宽度高度时等比例放大尺寸的。
第二种,使用CSS max-width和max-height实现图片自动等比例缩小
很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度,这样图片就会等比例缩放图片,然图片相对不变形清晰。
以下DIVCSS5通过实例对比方法让大家掌握CSS控制图片缩小不变形技巧。
一、原始描述 - TOP
这里有个DIV盒子(DIV class命名为"divcss5")CSS宽度和CSS高度方便为300px和100px同时设置1px黑色边框,里面放了一张图片(图片原始宽度650px为高度为406px)。并通过CSS固定死图片宽度高度。
1、HTML源代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>图片缩小不变形实例 www.divcss5.com</title>
- <style>
- .divcss5{ border:1px solid #000; width:300px; height:100px}
- .divcss5 img{width:300px; height:100px}
- </style>
- </head>
- <body>
- <div class="divcss5">
- <img src="img.jpg" />
- </div>
- </body>
- </html>
2、CSS固定死图片宽度高度实例截图
原始图片展示:
原始图片截图
css固定宽度高度后变形的图片截图
3、小结,通过CSS固定对象内图片高度宽度,这样图片如果不是等比例缩小,那么图片就变形了。
二、CSS解决图片缩小不变形实例 - TOP
使用max-width:300px或max-height:100px,即可解决图片比例缩小。但这样存在一个问题,如果按照宽度缩放,但图片过高会超出溢出盒子,这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height,IE6不支持,我们需要设置个width:expression(this.width > 300 ? "300px" : this.width);或者height:expression(this.height>100?"100px":this.height);。
解决IE6支持max-height
div css解决IE6支持max-width
一般情况下只需要设置好宽度限制,比如这里只设置最大宽度为300px(max-width:300px),然后对父级使用overflow:hidden隐藏溢出图片,同时为了兼容IE6我们设置个width:expression(this.width > 300 ? "300px" : this.width);解决即可。
1、具体解决DIV+CSS实例代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <title>图片缩小不变形实例 www.divcss5.com</title>
- <style>
- .divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden}
- .divcss5 img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);}
- </style>
- </head>
- <body>
- <div class="divcss5">
- <img src="img.jpg" />
- </div>
- </body>
- </html>
2、浏览器测试效果截图
css图片缩小等比例缩小后不变形截图
3、缺点介绍,如果使用此方法,兼容各大浏览器不变形,但图片不是完整显示的。
相关知识介绍:
CSS解决图片撑破DIV:http://www.divcss5.com/wenji/w364.shtml
CSS图片不超过网页宽度:http://www.divcss5.com/jiqiao/j52.shtml
4、在线演示:查看案例
5、实例打包下载
立即下载 (53.883KB)
三、css图片大小缩小不变形总结 - TOP
CSS DIV图片缩小不变形总结:最好解决方法就是从设计图片本身出发,将图片设计成与布局中宽度高度成等比例图片,比如你布局时候图片宽度为300px,高度为200px,那你设计图片素材时候提交添加的图片宽度高度本身可以为600px宽,400px高,或900px宽600px高,这样等比例的图片才能保证真正图片缩小后不变形,显示完整。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/wenji/w632.shtml
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧相关推荐
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
- html布局文字设置,div css布局中css中文字体设置
在HTML网页结构中,会用到中文字,而中文字有得多中笔墨体,有的开发者在自身电脑中下载并安装不少摩登字体.而这些中文字体CSS设置装备摆设提倡? 1.不克不及随意CSS设置装备摆设本人安装中笔墨体 假 ...
- YDOOK : CSS div 设置背景图片大小自动缩放
YDOOK : CSS div 设置背景图片大小自动缩放 设置示例: 选择器{width:100%;height:100%;background-repeat:no-repeat:background ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- 结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现
在Web标准中一个很重要的概念就是强调页面的结构与表现分离.说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式.一旦一个标准的XHT ...
- php背景图片随页面大小改变,css背景图根据屏幕大小自动缩放
css背景图根据屏幕大小自动缩放 代码: html,body{margin:0px;padding:0px;} #background { position: fixed;top: 0;left: 0 ...
- css布局中的居中问题
css布局中的居中问题 作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...
- 在CSS布局中让Floats轻拂
If you're new to CSS layouts, you'd be forgiven for thinking that using CSS floats in imaginative wa ...
- php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS布局中常用的文字排版相关属性详解 一.设定文字字体.颜色.大 ...
最新文章
- KINDLE TOUCH修复板砖过程
- 初学 Delphi 嵌入汇编[26] - 大小写字母转换
- 再读《精通css》02:选择器
- 1.0jpa 2.0_JPA 2.1实体图–第1部分:命名实体图
- dataAdapter与dataSet和dataTable的填充
- 扎克伯格不要「脸」了?Facebook正式更名为“Meta”
- 如何录制回放测试用例并且添加检查点?
- SQL Server学习笔记
- 压箱底的Android UI开源库(一)
- android webview 魅族,魅族 Flyme 系统出现大面积应用闪退问题,提供临时解决方法...
- 详谈概率图模型(PGM)
- B、KB、MB、GB、T单位换算
- ttl低电平接大电阻_电路中上拉、下拉电阻的作用及原理
- 每日一题——分发糖果
- WIFI设备配网之微信小程序开发AP配网
- Notepad++显示所有字符:空格换行
- 【错误记录】Gradle 配置 productFlavors 报错 ( All flavors must now belong to a named flavor dimension. )
- 电商大数据分析平台项目(一)项目框架
- 2019南昌邀请赛网络赛
- js方法在ie浏览器不起作用
热门文章
- android多个水波球,Android最简单的方式实现波浪纹和小球
- NC106350 POJ1753 Flip Game 翻转游戏
- 人体红外线感应垃圾桶控制板自动感应垃圾桶线路板MCU单片机开发
- mc服务器物品给予,我的世界指令大全/give 给予人 物品id 数量 - 给予某人物品,如果不写数_来自网易大神我的世界圈子_此生只做mc方块人...
- 企业宽带和点对点线路的内幕
- js树形结构数组扁平化
- python plc fx5u_三菱PLCFX5U模块专用指令有几个大类能详解吗?
- 率先通过信通院首批DevOps评估,博云获先进级认证
- 快速排序之JavaScript版
- 活性氧Atractylenolide II,CAS No. 73069-14-4