用css、如何让图片自动适应屏幕大小,不出现滚动条,不变形，兼容各个浏览器？急！！！各位大神帮帮忙_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
用css、如何让图片自动适应屏幕大小,不出现滚动条,不变形，兼容各个浏览器？急！！！各位大神帮帮忙
我有更好的答案
&img src=&images/bg.jpg& alt=&&/div&&div class='bg&#39如果是个背景图的话，定义一个div,高100%,宽100%，里面放个img&lt:0;html,body{overflow:}.bg{width: 100%;height: 100%;top:0;z-index: -1; position:}.bg img{display:outline:&
谢谢、解决了
采纳率：41%
来自团队：
img { width:100%; height:}这样就可以了
你这样会变形、出现滚动条、浏览器不兼容
body { margin:0; padding:0; width: 100%;height: 100%;}img { width:100%; height: 100%;display:}
为您推荐：
其他类似问题
滚动条的相关知识
换一换
回答问题，赢新手礼包你的位置： >
> HTML/HTML5 设置img(图片)自适应div(容器)
我的另一网站 ，使用的
搭建的。但是对于中引入的图片总是不能随着移动端的适配进行友好的展示。今天查阅了一些相关资料，进行了优化，在这里做个总结！
做法很简单，只要设置对应图片的width和htight的具体数值就可以了。看下面的例子：
max-width:100%;
max-height:100%;
这样设置图片的话，可以使图片在指定的空间内缩放。4行的意思是：
width:图片的宽度自己适应(图片有多宽就显示多宽)
height:图片的高度自己适应(图片有多高就显示多高)
width:和height:一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
max-width:100%;图片的宽度不能超过图片所在的空间的宽度
max-height:100%;图片的高度不能超过图片所在的空间的高度
max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。
和 ，优先对max-width进行缩放，当图片在max-width缩放后的尺寸仍然超出容器大小时。max-height就发挥了作用：对图片再次进行缩放！举例：
&div style=&width:50height:40px&&
&img src=&a.jpg&&
&!--这里我们假如图片的实际尺寸是320X320--&
图片被缩放后在div的尺寸是：
width:50（因为图片的width:100%）
height:50px（这里height是有width:100%被缩放后的尺寸。）
我们可以发现这个50px的高度仍然超出了div的40px的高度,不符合max-height
这个时候，max-height:100%;就会发挥作用，
在max-height:100%;的作用下，图片被缩放后在div的尺寸是：
这个尺寸符合max-height和max-width
所以，当div在不断变化时，图片在div中也会跟着布断发生变化，
这里不介意给图片设置width:100%;height:100%；会造成图片变形。
&!DOCTYPE html&
&meta charset=&utf-8&&
&title&&/title&
max-height: 100%;
max-width: 100%;
&div id=&div& style=&width: 50height: 50&&
&img src=&../.jpg& /&
window.onload=function(){
setInterval(function(){move();},1000);
function move(){
var _width=document.getElementById('div').style.width.replace('px','');
if(parseInt(_width)&400){
document.getElementById('div').style.width=parseInt(_width)-5+'px';
document.getElementById('div').style.height=parseInt(_width)-5+'px';
document.getElementById('div').style.width=parseInt(_width)+5+'px';
document.getElementById('div').style.height=parseInt(_width)+5+'px';
本文原文出处：： &
相关文章推荐怎么在做网页的时候让背景图片根据屏幕的分辨率而拉伸从而适应屏幕大小_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
怎么在做网页的时候让背景图片根据屏幕的分辨率而拉伸从而适应屏幕大小
在网上搜了一些脚本，却始终有错误，望高手指点一二。 解决可给您加分
可以设置图片的宽度和高度都为100%，之后可自适应屏幕大小。举例：&div class=&zj02& style =&width:100%;height:100%;overflow:&&&img src=&zj_01.gif& /&&/div&；此时图片即可全屏幕显示，不会出现”超宽“现象。
采纳率：80%
来自团队：
&&lt，注意图片路径--& width:100%.jpg换成你自己的图片给背景图片的宽高设置为100%如：&height:100%.jpg)body style=&!--其中的*;&quot:url(*
你这代码对浏览器有要求吗，我怎么实现不了啊？
删除这段代码试试&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&
是那个绿色的背景么
那个是我随便找的图 现在的效果是背景图片重复效果
这样，你给需要平铺背景的div层的宽度设置为100%
本回答被提问者和网友采纳
你可以把图片的分辨率调大一些，再用比例来设置div的大小，图片用百分比是不能放大的。。
为您推荐：
其他类似问题
背景图片的相关知识
换一换
回答问题，赢新手礼包手机网站中，请问如何让同一页面的多张图片等比例的自适应手机屏幕。_百度知道
手机网站中，请问如何让同一页面的多张图片等比例的自适应手机屏幕。
最好能提供源码，我直接替换图片，类似图里这种
我有更好的答案
&img&src=&one.jpg&&/&不要加width和height。css:img{&width:100%}
您能就我第二图给个详细代码，我只管复制粘贴吗？
采纳率：46%
来自团队：
为您推荐：
其他类似问题
手机屏幕的相关知识
换一换
回答问题，赢新手礼包控制缩略图常见的是JS来控制，还有就是最直接的方法定义img的宽高；下面两种方法自适应宽和高，zhenzhai推荐使用CSS方法；一、CSS方法；主
要是在CSS设置最小值和最大值(max-width:&100&max-
height:&100&width:&expression(this.width&&100&&&&this.height&&&this.width&?&100:&true);&height:&expression(this.height&&&100&?&100:&true);)
1 &!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
&style type="text/css"&
border: 0;
.imgthumblist {
margin: 0 3px;
padding: 0;
list-style: none;
.imgthumblist li {
float: left;
display: inline;
text-align: center;
background: #F0F9FF;
width: 108px;
height: 163px;
width: 100px;
height: 155px;
overflow: hidden;
border: 1px solid #B9D0ED;
padding: 3px;
margin: 3px;
.imgthumblist li.list1line {
height: 123px;
height: 115px;
.imgthumblist li.list2line {
height: 143px;
height: 135px;
.contentL .imgthumblist li {
margin: 0 1px 3px;
.imgthumblist p {
margin: 0;
line-height: 18px;
font-size: 12px;
.imgthumblist div {
line-height: 90px;
font-size: 90px;
height: 100px;
display: table;
.imgthumblist div a {
display: table-cell !important;
display: block;
width: 100px;
vertical-align: middle;
.imgthumblist div img {
vertical-align: middle;
max-width: 100px;
max-height: 100px;
width: expression(this.width &100 && this.height & this.width ? 100: true);
height: expression(this.height & 100 ? 100: true);
font-size: 10px;
@media all and (min-width: 0px) {
.imgthumblist div img {
width: 100px;
height: 100px;
/*for Opera Only*/
81 &/head&
&ul class="imgthumblist"&
&li class="list2line"&
&div&&a href="/blog/article.asp?id=155" title="图片名称"&&img src="/blog/attachments/month_221928.jpg" alt="图片名称" /&&/a&&/div&
&p&&a href="/blog/article.asp?id=155"&图片名称&/a&&/p&
&p class="smalltxt"&图片数:1&/p&
&li class="list2line"&
&div&&a href="/blog/article.asp?id=155" title="图片名称"&&img src="/blog/attachments/month_.jpg" alt="图片名称" /&&/a&&/div&
&p&&a href="/blog/article.asp?id=155"&图片名称&/a&&/p&
&p class="smalltxt"&图片数:3&/p&
&li class="list2line"&
&div&&a href="/blog/article.asp?id=155" title="图片名称"&&img src="/blog/attachments/month_2219452.jpg" alt="特别的爱给特" /&&/a&&/div&
&p&&a href="/blog/article.asp?id=155"&图片名称&/a&&/p&
&p class="smalltxt"&图片数:4&/p&
102 &/body&
103 &/html&
二、JS方法我就不说了代码写的很清楚
1 &!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
2 &html xmlns="http://www.w3.org/1999/xhtml"&
&script type="text/javascript"&
//改变透明度参数：图片对象，透明度：1-100的值
function setAlpha(imgObj, opacityValue) {
imgObj.filters.alpha.opacity = parseInt(opacityValue);
//图片的显示大小[以宽度来限制]
function DrawImageW(imgObj, widthValue) {
var image = new Image();
image.src = imgObj.
if (image.width & 0 && image.height & 0) {
if (image.width &= widthValue) {
imgObj.width = widthV
imgObj.height = (image.height * widthValue) / image.
imgObj.width = image.
imgObj.height = image.
//图片的显示大小[以高度来限制]
function DrawImageH(imgObj, heightValue) {
var image = new Image();
image.src = imgObj.
if (image.width & 0 && image.height & 0) {
if (image.height &= heightValue) {
imgObj.height = heightV
imgObj.width = (image.width * heightValue) / image.
imgObj.width = image.
imgObj.height = image.
//图片的显示大小[宽高同时限制]
function DrawImage(imgObj, widthValue, heightValue) {
var image = new Image();
image.src = imgObj.
if (image.width & 0 && image.height & 0) {
if (image.height & heightValue || image.width & widthValue) {
var h = 0, w, wflg = false;
if (image.height & heightValue)
wflg = true;
if (wflg) {
w = widthV
h = (image.height * widthValue) / image.
if (h == 0 || h & heightValue) {
h = heightV
w = (image.width * heightValue) / image.
//alert(w)
//alert(h)
imgObj.width =
imgObj.height =
imgObj.width = image.
imgObj.height = image.
function zoomImg(imgObj) {
var zoom = parseInt(imgObj.style.zoom, 10) || 100; zoom += event.wheelDelta / 12; if (zoom & 0) imgObj.style.zoom = zoom + '%';
return false;
73 &/head&
&img src="/blog/attachments/month_221928.jpg" onload="javascript:DrawImageW(this,100);" style="filter:alpha(opacity=60)" onmouseover="setAlpha(this,100)" onmouseout="setAlpha(this,60)" title="修改透明度" /&
&img src="/blog/attachments/month_221928.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" /&
&img src="/blog/attachments/month_221928.jpg" onload="javascript:DrawImageH(this,100)" title="高在100以内" /&
&img src="/blog/attachments/month_221928.jpg" onload="javascript:DrawImage(this,100,100)" title="宽高在100以内" /&&br /&
&img src="/blog/attachments/month_.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" /&
&img src="/blog/attachments/month_.jpg" onload="javascript:DrawImageH(this,100)" title="高在100以内" /&
&img src="/blog/attachments/month_.jpg" onload="javascript:DrawImage(this,100,100)" title="宽高在100以内" /&&br /&
&img src="/blog/attachments/month_2219452.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" /&
&img src="/blog/attachments/month_2219452.jpg" onload="javascript:DrawImageW(this,100)" title="高在100以内" /&
&img src="/blog/attachments/month_2219452.jpg" onload="javascript:DrawImage(this,100,100)" onmousewheel="return zoomImg(this)" title="放大缩小" /&
94 &/body&
95 &/html&
javascript
来自:/MaxIE/archive//634579.html
阅读(...) 评论()