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>
纯css实现有很多局限性,建议使用js
.img{max-height:100%
max-width:100%
} //缺点 如果图片宽高同时大于父容器,图片会被拉伸
使用js辅助：(部分api为h5特有，注意兼容性)
var oImg = document.querySelector('.img')oImg.addEventListener('load', function () {
//图片未加载完成前无法获取原始宽高，所以需要图片加载完成后再判断
if (oImg.naturalWidth >= oImg.naturalHeight) {
oImg.style.width = '100%'
} else {
oImg.style.height = '100%'
}
})
获取图片原始宽高拓展阅读网页链接
<html><head>
<meta http-equiv="content-type" content="text/html charset=UTF-8" />
<title>测试</title>
</head>
<body>
<style>
div{margin-bottom:20px}
</style>
<div style="width:100pxheight:100pxoverflow:hiddenbackground:url(http://img.baidu.com/img/iknow/r/image/2014-01-03/297d706b130942bca4e0d5bbb96cd8aa.png?t=1388712210)">
</div>
<div style="width:100pxheight:100pxbackground:url(http://img.baidu.com/img/iknow/r/image/2014-01-03/297d706b130942bca4e0d5bbb96cd8aa.png?t=1388712210)background-size:100px"></div>
<div style="width:100pxheight:100pxoverflow:hidden"><img src="http://img.baidu.com/img/iknow/r/image/2014-01-03/297d706b130942bca4e0d5bbb96cd8aa.png?t=1388712210"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
function getHeight() {
var h = $("img").outerHeight() //取图片高度
var w = $("img").outerWidth() //取图片宽度
if (h > w){ //判断一下，如果高度大过宽度，就设置宽度为100，高度多出来的，会被DIV的overflow:hidden裁剪掉，反之，宽度比较大就设置高度为100，宽度多出来的会被裁剪。
$("img").width(100)
}
else{
$("img").height(100)
}
}
window.onload = function() {
getHeight()
}
</script>
</body>
</html>
用了三种方法，你自己看一下吧。
第三种方法，你可以搜搜资料，看看有没有JQUERY获取背景大小，然后再设置小的为固定，然后，多出来裁切掉，这样的话，就可以在背景样式中加上center显示图片中间。
