javascript 实现图片自动适应DIV的大小并进行拉伸,使图片不重复显示

JavaScript011

javascript 实现图片自动适应DIV的大小并进行拉伸,使图片不重复显示,第1张

楼主,这个我接触多了你试试我的.可以的话求采纳。

css:

.div1{width:100px}//这个随意设置

.div1 img{width:100%}

html:

<div class="div1"><img src="我的图片" /></div>

单独的图片控制,用这个:

代码如下:

<script>

var abc=document.getElementById("abc")

var imgs=abc.getElementsByTagName("img")

for (var i=0,gg=imgs[i]i++)

g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}

</script>

<style>

.frame_all{

padding:5px 5px 0px

display:block

float:left/*这里让div飘了*/

background-color:red}

.frame_img{

background-color:blue}

.frame_title{}

.frame_title span{

font-size:14px

line-height:23px

font-weight:bold

color:white

display:block

text-align:center

margin:0 auto}

</style>

<div class="frame_all">

<div class="frame_img">

<img src="" width="100" height="150" />

</div>

<div class="frame_title">

<span>标题</span>

</div>

</div>

想让div自动适应宽度就直接飘(float)就好了,但是飘理解的不深刻就会飘乱了。

内部的那个span不要设置宽度,因为它本来就不固定。

你可以把代码贴出来,我给你改改。这段代码你看看对你有帮助没