如何用CSS使图片自适应显示宽度

html-css017

如何用CSS使图片自适应显示宽度,第1张

如何用CSS使图片自适应显示宽度 公司的专案中需要显示由使用者提供URI连结的图片，可是预先无法获知图片的尺寸大小，如果图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩图，涉及的后台工作较为复杂，用CSS进行控制是一个可以接受的捷径。 如果用width 属性强行设定显示尺寸似乎太不智慧。幸好Firefox/Opera/IE 7 都提供了 max-width 属性支援。假定希望图片显示宽度不超过500画素，CSS可能如下： 以下是引用片段： 以下是引用片段： fit-image{ border:0max-width:500px}IE6 不支援 max-width 属性，但是利用 IE 独有的 expression 属性可以迂回的解决这个问题。 以下是引用片段： 以下是引用片段： fit-image{ border:0max-width:500pxwidth:expression( function(img){ img.onload=function(){ this.style.width=’’this.style.width=(this.width500)?"500px":this.width+"px"}return’120px’载入时显示宽度为120px }(this))}利用<img的onload 事件使图片载入完成后计算其尺寸大小，如果超过500画素就显示为500画素，否则显示其预设宽度。 expression 不是符合WEB标准的做法，不到万不得以不建议使用。但是不能不承认IE的很多扩充套件是不错的，IE不应该被轻视!

CSS程式码如何使图片自适应显示宽度

图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩图，涉及的后台工作较为复杂，用CSS进行控制是一个可以接受的捷径。 如果用width 属性强行设定显示尺寸似乎太不智慧。幸好 Firefox/Opera/IE 7 都提供了 max-width 属性支援。假定希望图片显示宽度不超过500画素，CSS可能如下： 以下是引用片段：以下是引用片段：

fit-image {

border : 0

max-width : 500px

} IE6 不支援 max-width 属性，但是利用 IE 独有的 expression 属性可以迂回的解决这个问题。 以下是引用片段：以下是引用片段：

fit-image {

border : 0

max-width : 500px

width: expression (

function(img){

img.onload=function(){

this.style.width = (this.width >500)?"500px":this.width+"px"}return ’120px’ 载入时显示宽度为120px}(this))} 利用<img>的onload 事件使图片载入完成后计算其尺寸大小，如果超过500画素就显示为500画素，否则显示其预设宽度。 expression 不是符合WEB标准的做法，不到万不得以不建议使用。但是不能不承认IE的很多扩充套件是不错的，IE不应该被轻视!

css怎么让图片自适应

看什么情况了

一是通过将该图片设定为某个div的背景图片，然后该div的长宽不使用绝对的px，使用相对的em或者rem。

二是将图片设定display：block，设定图片的长宽为rem或者em。

还是要看是什么情况下来去自适应图片的，

如何使用CSS强制图片自适应大小

<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" " :w3./TR/x1/DTD/x1-transitional.dtd">

<xmlns=" :w3./1999/x">

<head>

<meta -equiv="Content-Type" content="text/charset=gb2312" />

<title>无标题文件</title>

<style type=text/css>

img {width:expression(this.width>600?"580px":this.width+"px")}

</style>

</head>

<body>

图片宽度大于600画素都强制显示为580画素宽<br><br>

<div>

<img src= :makewing./lanren/wallpaper/wallpaper-0013.jpg />

</div>

</body>

</>

如何是页面上的图片自适应页面宽度？

<img width=100% src=a1.jpg>

如何用纯CSS将图片填满div，自适应容器大小

将图片的宽和高的属性设定为100%即可

例如图片的类名为pic

.pic{width: 100%height: 100%}

如何让input宽度自适应?

很多时候文字框输入的内容是不固定的，有时候输入的内容多一些需要宽一些有时候输入的内容少一些需要窄一些，所以需要设定input的宽度自适应。

工具原料：编辑器、jQuery

1、解决宽度自适应的思路是使用jQuery来监听输入事件，进而进行动态的改变input的宽度，实现input宽度自适应的效果。

2、首选获取文字的宽度，利用pre 元素可定义预格式化的文字，被包围在 pre 元素中的文字通常会保留空格和换行符而文字也会呈现为等宽字型，简单的程式码示例如下：

var textWidth = function(text){ var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'})$('body').append(sensor)var width = sensor.width() sensor.remove()return width }

3、根据以上获取到的文字的宽度来给input系结事件动态改变宽度，简单的程式码示例如下：

$("input").unbind('keydown').bind('keydown', function(){$(this).width(textWidth($(this).val())) })

input高度固定，自动增宽<br>

<input type=text class="page_speeder_863029014">

<br>

<br>

textarea宽度固定，自动增高<br>

<textarea type=text class="page_speeder_1875386613"></textarea>

这就出现一个问题，如果图片过小，或文字过长，就会出现文字把整个表格撑得很大，即占用了很多空间，显示效果也非常不美观。

网上也有许多解决办法，但要么复杂，要么不能解决跨浏览器问题，要么不能自适应图片大小变化。

在我的这个方法中，解决了：　不需要在代码中指定图片大小、跨浏览器、非常简单。最后的效果如下图所示，当文字过长时，它会自动换行以适应图片宽度：

方法如下：

1）图片及图片说明代码如下：

<table

class="mod_img"

width="10"

align="left"

border="0"

cellpadding="0"

cellspacing="0"><tbody><tr><td

align="center"><a

title="点击查看原图"

href="/upload/20090214135145954.png"

target="_blank"><img

src="http://files.jb51.net/upload/20090214135147104.png"

vspace="0"

border="0"

hspace="0"></a></td></tr><tr><td

align="center"><div

class="mod_img_desc">香港殖民地最后的一面旗帜，由英国蓝旗和代表香港的殖民地徽所组成，1959年-1997年</div></td></tr></tbody></table>2）"mod_img"

的定义如下，它指定了表格及图片边框的CSS样式：

.mod_img

{margin:6px

border:1px

solid

#AAAAAA

padding:

3px

}

.mod_img

img{margin:3px

border:1px

solid

#AAAAAA

padding:0px

}

3）"mod_img_desc"

的定义如下，它指定了说明文本的CSS样式：

.mod_img_desc

{font-size:12pxword-break:break-allwidth:100%

overflow:auto}

这里的关键是上边的

width="10"

这处，这是文本自适应图片宽度的关键，实际上10是个很小的值，一般图片都大于这个值，并且在表格中显示一个图片时，图片会按自己的实际大小把这个表格撑开，因此这个

width

并不会影响图片的显示，而在

3）处指定了文本的

width

为100%，就是说文字按照实际的宽度显示，而不管该宽度是多少，当文字超过宽度时，自动换行。

经过测试，该方法在

IE/Firefox/Safari/Opera等浏览器中均能完美正常工作！祝你愉快。

方法一：text-decoration-skip指定覆盖关系text-decoration-skip是与text-decoration相关的CSS3属性。效果很不错，不过缺点在于目前只有Safari8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性，且仅仅支持skip（默认值）和none两个值。此方法是最原生的，但是由于兼容性问题，目前还不太合适。方法二：使用border-bottom属性模拟我觉得这是一个不错的想法，CSS博大精深，哈哈。^.^内联元素虽然不支持垂直方向的margin属性，但是支持垂直方向的padding属性和border属性，并且，对原来的布局定位等没有任何影响。因此，配合padding，我们就可以很有效地调节下边框和文字下边缘的距离，实现我们最想要的的效果。（张老师的原话）代码如下：a {text-decoration: noneborder-bottom: 1px solid}这样写的有点在于border-bottom还有dashed属性，我们还可以创造虚线下划线 :Pa {text-decoration: noneborder-bottom: 1px dashed}效果图：金玉全王方法三：使用box-shadow属性模拟使用box-shadow的想法也是很棒的，其实动动脑子，CSS还有好多玩法。(●'◡'●)直接上代码~a {text-decoration: nonebox-shadow: 0 1px}这里box-shadow用了两个值，在这里解释一下：box-shadow: h-shadow v-shadow blur spread color inset此处的两个值分别是 h-shadow 和 v-shadow。h-shadow：水平阴影的位置。允许负值。v-shadow：垂直阴影的位置。允许负值。垂直阴影为1px于是就有了下划线的样子。相比border-bottom属性，box-shadow的优势在于，即使我们把内联元素设置成display:inline-block，生成的下划线也不会对垂直对齐或者布局产生影响，但，如果是border-bottom，会增加元素的尺寸，可能就会影响元素的排列。但是，box-shadow也有不足，一是兼容性，IE9+才支持，二是只能实线，不能虚线。