怎样用CSS使图片高度自动缩放比例

作者&投稿:傅彭 (若有异议请与网页底部的电邮联系)
~
我们知道,在瀑布流这类的图片列表布局中常常可以看到用CSS控制DIV里的图片宽度高度,其实这样的布局很简单,今天就给大家详细讲解一下。
当遇到这样的DIV CSS布局时候,其实非常简单,我们只需要对图片宽度进行控制,而图片高度不用设置即图片高度会自动适应缩放比例(不设置高度即高度值默认为auto自适应)。
如上图,加入一个CSS命名为“.imgbox”的DIV盒子里图片宽度为252px,这个时候对应如何写CSS让对象里图片高度自动根据宽度缩放比例:
.imgbox img{width:252px}
就这样简单CSS选择器即可控制DIV盒子“.imgbox”里图片宽度,而没有设置CSS高度(height)样式,这样默认图片就会自适应宽度等比例缩放了。
小结:
对于新手来说,可能忘记了宽度、高度如果不设置默认是自适应这一特性,所以可能遇到设置图片宽度,就想一定要给予设置高度这样的固化思维。其实在CSS布局中图片宽度固定、高度自适应这种要求情况下,CSS只需设置宽度值,高度就不用添加设置即可达到想要布局效果。
在布局中如果图片高度和宽度都是固定不变的,无论图片多大什么比例,布局的图片宽度高度是固定的,这种情况下就需要同时对图片设置固定宽度和高度值。
相信看了这些解析你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!


相关阅读:
怎样让DIV自适应高度

在HTML里用CSS隐藏div的方法

详解前端响应式布局、响应式图片,与自制栅格系统


空间里CSS中如何设置背景图片的高度(显示不全)
header{height:700px\/*这个值改的越大显示的就会越多,图片就不会被挡住了!*\/;background:#FFFFFF} header div.lc{background:url(http:\/\/bbsimg.house.focus.cn\/upload\/photos\/2710\/wNLOHqbi.jpg) no-repeat} header div.rc{background:url() no-repeat top right} header div.tit{top:...

用CSS或者JS定义图片宽度高度不失真
放大一定会失真,缩小却不会,只要用js控制图片的宽或者就可以,只需要控制一个就可以,给你个js函数 function DrawImage(ImgD,ImgW){ \/\/图片大小控制ImgD图片路径,ImgW是宽或高,看效果,看代码 var image=new Image();image.src=ImgD.src;if(image.width>0 && image.height>0){ if(image....

如何用CSS代码控制图片的大小?
假设你的HTML中的图片是这样的: 然后你在CSS中写:img#myPic{width:100px; height:120px;} 总之就是width和height两个属性。当然你也可以设置更复杂的样式。

图片不一般高,css怎么解决
如果你包住图片的父级元素的类是.fuqin 那么就是.fuqin>img{ width:250px;height:150px;}

如何用DIV+CSS控制图片大小范围?
使用CSS max-width和max-height实现图片自动等比例缩小 很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度,这样图片就会等比例缩放图片,然图片相对不变形清晰。使用max-width:300px或max-height:100px,即可解决图片比例缩小。但这样存在一个问题,如果按照宽度缩放,但图片...

css中如何调整插入背景图片的大小
*\/ background-size:10%;\/* 0%~100%之间的任何值,将背景图片宽高按百分比显示,当设置一个值的时候同也将其作为图片宽度来等比缩放 *\/ background-size:cover;\/* 将背景图片等比缩放填满整个容器 *\/ background-size:contain;\/* 将背景图片等比缩放至某一边紧贴容器边缘 *\/ ...

怎么用css把背景图片拉伸 不是平铺
Dreamweaver8 怎么样把背景图片拉伸全屏??Dreamweaver8 工具下面有个页面属性 你开启后设置背景 还有平铺 什么的 一些属性 你看一下就会用了 解决方法有两种:一种是CSS,使用background-size:cover实现图片的拉伸效果,但是IE8及以下版本不支援background-size,于是可以使用微软的滤镜效果,但是IE6不支援...

怎样用css控制图片自适应大小?
1、首先用dw编辑器建立了一个静态页面 2、将建好的静态页命名为css.html,标题为了“css如何设置图片大小自适应”3、在body中添加两个div,设置不能的宽度,并设class 为div1和div2,目的是用一样的css控制图片的宽度在不同的宽度容器中都能很好的显示 4、在两个div的class 中添加相同的控制图片的...

DIV+CSS宽度100% 怎么设置图片不变形,高度自适应
需要准备的材料分别有:电脑、浏览器、html编辑器。1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的标签中,输入css代码:body {background: url(image123.jpg) no-repeat; background-size: cover;}。3、浏览器运行index.html页面,此时图片既没有变形就能完整显示在...

css图片不配高度只配宽度,高度就会自动等比显示吗?
默认情况下,图片只需要设置宽度,高度就会自动等比例调整,同理,只设置高度,宽度也会自动等比例调整,如果同时设置宽度和高度,那么就要自己计算好宽高比例,否则的话图片就有可能会发生变形。因此通常情况下宽度和高度只需要设置其中一项即可。以上描述不适用于除图片外的其他元素。

东营区15513348794: 请教如何用CSS控制图片宽度和高度,使图片不变形 -
莫肿众益: 宽度和高度不要同时设置,只需要设置一个,另一个就会自动按照图片的原始比例进行缩放,从而使图片不会发生变形.如果情形比较复杂,比如预先不知道图片是宽大于高还是高大于宽,又想把图片控制在某个范围内(比如正方形),就要结合JavaScript脚本才能实现了(网上大把代码,自己百度).或者也可以把图片搞成背景图,然后利用css3的background-size属性来让图片保持原始比例,这样就无需借助js,缺点就是浏览器必须支持css3

东营区15513348794: css 可以按比例缩放图片吗? -
莫肿众益: 解决这个问题的方法如下:1、先在html里添加一个img图片标签.2、运行页面后,这是完整显示图片大小的.图片大概是400x260左右的大小.3、要进入图片缩放,可以在css样式里设置图片的宽度和高度,但不要宽和高都设置了,比如这里都设置为100px.4、设置后,看下页面可以看到图片现在变形了.5、正确的方法应该是只设置其中一个,比如设置宽度为100px,高度设置为自动就行了.6、这里设置后的效果,图片并没有变形.7、同样,如果是限定高度的大小,就设置宽度为自动,图片同样不会变形,这样问题就解决了.

东营区15513348794: CSS 表 ,图片高度如何自动调整? -
莫肿众益: 看你图片的宽和高,再看你flash容器的大小,设置图片的宽和高相对于flash等比例的缩小和增大.,我上次做网页就是那样搞得.

东营区15513348794: 如何利用css将图片设置为背景图,根据不同分辨率的屏幕,自动缩放 -
莫肿众益: 你可以将图片的宽高设置成根据浏览器窗口大小来进行自动调整,首先获取到screenX,screenY,然后将图片的大小设置为该值的百分比,就可以自动缩放了.

东营区15513348794: div+css怎么让背景图片自动缩放
莫肿众益: body {background: url("./../img/bg.jpg") fixed center center no-repeat;background-size: cover;width: 100%;}

东营区15513348794: 如何利用JS或者CSS样式来自动调整图片大小 -
莫肿众益: js版和css版自动按比例调整图片大小方法,分别如下:<title>javascript图片大小处理函数</title><script language=Javascript> var proMaxHeight = 150; var proMaxWidth = 110; function proDownImage(ImgD){ var image=new Image(); image.src=...

东营区15513348794: Js+Css调整图片大小 -
莫肿众益: 增加css style="max-width: 200px;" 这个是最大宽度不要超过200像素,你只需要设计一个宽,而不去设置高的话,那么高就会自动按比例缩放. 或者style="width:200px;"这个就是全部宽为200像素.

东营区15513348794: 用CSS让图片的高度根据宽度调整 -
莫肿众益: 如果是一开始就固定400,一楼的方法就可以 如果宽度一开始是800,接着变成400,就要用脚本了

东营区15513348794: div+css怎么让背景图片自动缩放 -
莫肿众益: 你好,是根据串口大小来自动调整的么?这样:body { background: url("./../img/bg.jpg") fixed center center no-repeat; background-size: cover; width: 100%; }

东营区15513348794: div+css把图片等比缩放怎么弄 -
莫肿众益: 这个只需要在图片那里加入尺寸就OK了,不过一般我们都不这样做,这样做图片会变形的.我们一般都是先用fireworks(或者PS)调好尺寸再放进去的.

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网