div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决。

解决方法有两种:
第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度高度,图片也是等比例缩小,图片也不会变形。

比如淘宝,要求店铺主上传产品封面图片是正方形的,为什么,因为图片宝贝展示列表都是正方形的排版布局,这样要求上传合适正方形宝贝封面图片,也是让图片不变形。

所以有条件的情况下,大家将首页、图片列表页的布局宽度高度保持一致,上传图片时候将图片先进行处理为布局宽度高度时等比例放大尺寸的。

第二种,使用CSS max-widthmax-height实现图片自动等比例缩小
很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度,这样图片就会等比例缩放图片,然图片相对不变形清晰。

以下DIVCSS5通过实例对比方法让大家掌握CSS控制图片缩小不变形技巧。

一、原始描述   -   TOP

这里有个DIV盒子DIV class命名为"divcss5")CSS宽度CSS高度方便为300px和100px同时设置1px黑色边框,里面放了一张图片(图片原始宽度650px为高度为406px)。并通过CSS固定死图片宽度高度。

1、HTML源代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>图片缩小不变形实例 www.divcss5.com</title>
  6. <style>
  7. .divcss5{ border:1px solid #000; width:300px; height:100px}
  8. .divcss5 img{width:300px; height:100px}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="divcss5">
  13. <img src="img.jpg" />
  14. </div>
  15. </body>
  16. </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:e­xpression(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实例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>图片缩小不变形实例 www.divcss5.com</title>
  6. <style>
  7. .divcss5{ border:1px solid #000; width:300px; height:100px;overflow:hidden}
  8. .divcss5 img{max-width:300px;_width:expression(this.width > 300 ? "300px" : this.width);}
  9. </style>
  10. </head>
  11. <body>
  12. <div class="divcss5">
  13. <img src="img.jpg" />
  14. </div>
  15. </body>
  16. </html>

2、浏览器测试效果截图


css图片缩小等比例缩小后不变形截图

3、缺点介绍,如果使用此方法,兼容各大浏览器不变形,但图片不是完整显示的。
相关知识介绍:
CSS解决图片撑破DIVhttp://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高,这样等比例的图片才能保证真正图片缩小后不变形,显示完整。

时间: 10-02

div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)的相关文章

DIV+CSS布局中主要CSS属性介绍

Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能. Margin: Margin属性用于设置两个元素之间的距离. Padding: Padding属性用于设置一个元素的边框与其内容的距离. Clear: 使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面

DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异

IE与FF浏览器之间的一些重要差异: ·IE与FF的居中方式不一样. (1)如何让body体能够在IE与FF浏览器中都居中的例子: [html] view plaincopyprint? <html> <head> <title>让body容器在浏览器中居中</title> <link rel="stylesheet" type="text/css" href="body_center.css"

关于css布局中margin,padding在整个布局中使用的一些细节

最近在学习写网页,在用html标记语言和css布局时,发现css布局中的margin,padding会使整个布局变大,最后在研究了css盒模型时找到了答案. 主要原因是margin定义了模块的外边距,padding定义了模块的内边距,如果在布局时没有把两块边距像素考虑到整个布局中,并且在父布局里宽高都设置为固定,此时会发生的事情就是:在整个父布局中如果宽度容纳不下子布局,那么子布局会撑出整个父布局,例如: <div id="container"> <div id=&q

css布局中,什么是BFC

BFC的定义是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性.在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(collapse). 在 Block Formatting Context 中,每一个元素

CSS布局中应用BFC的例子

BFC是啥? BFC(Block Formatting Context),“块状格式化上下文”.简单地说,它提供一个独立的布局环境.在同一个BFC中,盒子会一个挨一个地排列,margin边距还会在垂直方向上叠加.float和clear:float也只会在同一个BFC内有效. 产生BFC的情况有? W3C标准中这样描述:Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cel

认识和理解css布局中的BFC

认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Context 的元素的特点 其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性. 相邻的块级元素的垂直边距会折叠(collapse). 每一个元素左外边(margin)与包含块的左边相接触(对于从右到左的格式化,右外边接触右边)

Div+CSS网页布局中CSS无效的十个常见原因

学习Div+CSS网页布局的知识,可是兄弟连validation有时难以操作,但用它你可以查看由版面设计引起的差错,验证程序抛出大量差错和警告,说明你的XHTML尚未完善,可能无法在不同浏览器上保持一致功能,下面十个细微的失效问题难住了大批程序员,本文就告诉你如何解决,在本文开始前介绍一些使用兄弟连PHP培训的基础div+css验证程序时需要注意的问题. 1.不要担心验证程序的警告:如果验证程序说发现12处错误以及83处警告,不要理它,继续进行下一步. 2.一次更正一个错误:按顺序进展工作,从上

css布局中的垂直水平居中对齐

前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下. 固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-100px; margin-to

谈CSS布局中HTML标签语义化

很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这里,我可以很负责的告诉大家,这不叫web标准,这叫“div+css”.名副其实的“div+css”.也许有人会说,我用“div+css”做出来的页面完全表达出设计图的意图,浏览器都兼容,没有任何问题.的确,你这样做出来的页面看起来是没任何问题,注意,这里说的是“看起来没任何问题”,仅此而已. 人是可