如何让图片适应div_怎么让图片自适应DIV高宽不变形呢

㈠ css文件如何使背景图片大小适应div的大小

对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。
background-size有3个属性：
auto：当使用该属性的时候，背景图片将保持100%
的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。
cover：当使用该属性时，图片将被缩放至恰好能覆盖div，并且图片被隐藏的部分最少，这种属性在大图背景中应用比较广泛。这点比较难理解，需要结合实践理解。
contain：当使用该属性时，图片被缩放至最大且能被完全展示出来，但是由于图片的的尺寸比例与div的尺寸比例会有不同，所以当图片不能盖住div时，图片会自动平铺。

㈡如何使div中的图片自适应宽度和高度，图片不变形，可以超出div，超出部分隐藏

1、HTML的div标签主要是用来布局，div默认是没有任何属性的这也是常用它布局的原因。

㈢怎么让图片自适应DIV高宽，不变形呢

可以这样写

$("img").each(function(){
		var$imgH=$(this).parent("div").outerHeight();
		var$imgW=$(this).parent("div").outerWidth();
		$(this).css({
			"width":$imgW,
			"height":$imgH
		})
	})

不过div大小如果超出图片原来的分辨率,图片肯定会模糊的

㈣怎么样让图片适应div大小，但是还能在图片上面加字。

样式这样写：

.xxxDiv{
background:#000url("images/xxx.png")no-repeatscrollcentercenter;
background-size:100%100%;
}

HTML例子：

<divclass="xxxDiv">哈哈哈</div>

㈤让图片适应div大小

先给div定义overflow:hidden样式，不是为了剪裁图片，只是为了页面加载的时候，图片不会把div撑开，让页面布局被破坏，然后给所有需要自适应的图片，定义一个相同的name属性，然后在页面onload事件，或者页面最后调用一个脚本，获取全部name属性为你定义的图片，然后循环遍历这些图片，和图片的父对象，然后给图片的width，height属性进行值定义，就OK了

和父对象对比的时候，width和height分开对比，当width和父对象相同的时候，并且height小于等于父对象，只设置width就够了，这样进行的缩放，就是原比例缩放，不然会拉伸失真的，相反，当height和父对象相同的时候，并且width小于等于父对象，只设置height就够了

以上是客户端处理方法，图片如果太大太多的话，对服务器压力比较大，另一种方法就是在用户上传的时候，编写图片程序，进行判断，手动把图片缩小到指定大小，判断方法类似上边那一段，但是你设置width的时候，需要手动计算一下height，因为自己编写的程序，是不会自动保持比例的

㈥ html 怎么让img自适应div大小

使html中div内的图片随屏幕大小调节的操作方法为，将div与img的宽度都设置为100%，代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

<htmlxmlns="

<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>图片大小自适应</title>
<styletype="text/css">
div,img{width:100%;}
</style>
</head>
<body>
<div>
<imgsrc="20150930010349.jpg"/>
</div>
</body>
</html>

效果图如下：

特别说明：

要图片跟随屏幕大小显示，可以将图片与div的宽度调整为100%，并且body不设置宽度（或者也设置为100%），在使用不同屏幕浏览网页时，图片将自动铺满屏幕。

有用记得采纳

㈦ DIV+CSS，如何让图片自适应大小

放在CSS文件里面代码
.Size{
width:150px;
height:150px;
}
图片调用css代码<img
src="图片路径"
class="Size"
alt="当图片不能正常显示是，替换它的文字"/>
所有只要都调用class="Size"就可以实现全部图片都是150px的尺寸

㈧ div的class是图片，怎么使图片的宽度自适应div的宽度

<div style='width:400px;height:auto;text-align:center;float:none;margin-left:auto;margin-right:auto;'><img src="image.jpg" style="width:100%;height:auto;"></div>这样子就行的

㈨ css手机版页面制作时如何让背景图片适应div的高度和宽度

具体步骤如下：

1、输入position:fixed; top: 0; left: 0;使整个div固定在屏幕的最上方和最左方。

㈩如何让图片自适应相邻元素div 的高度变成图片高度内字体垂直居中

方法一：
该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。
HTML代码

1
2
3

<div id="box">
<span><img src="images/demo.jpg" alt="" /></span>
</div>

CSS代码

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>


方法二：
方法二和方法一的实现的原理大同小异，结构也是相同的，方法一用的是条件注释，方法二就用的CSS Hack。
CSS代码

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*针对IE6/7的Hack*/
top:50%; /*针对IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*针对IE6/7的Hack*/
top:-50%;left:-50%; /*针对IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

该方法有个弊端，在标准浏览器下由于外部容器#box的显示模式为display:table-cell，所以导致#box无法使用margin属性，并且在IE8下设置边框也无效。

导航:首页 > 图片大全 > 如何让图片适应div

如何让图片适应div

与如何让图片适应div相关的资料