导航:首页 > 动漫图片 > css怎么设置图片和外层盒子一样大

css怎么设置图片和外层盒子一样大

发布时间:2023-06-11 11:26:12

1. 网页图片大小设置(CSS)

方法是背景定位。摘引一段同学给的代码:

<ul id="thumbList">
<li id="thumb001" class="vertical"><a href="#" style="background-image:url(thumb/thumb001.png)" ></a></li>
<li id="thumb002" class="vertical"><a href="#" style="background-image:url(thumb/thumb002.png)" ></a></li>
<li id="thumb003" class="vertical"><a href="#" style="background-image:url(thumb/thumb003.png)" ></a></li>
<!-- 省略... -->
</ul>

#thumbList a{
display:block;
height:100%;
width:100%;
border:1px solid #FFF;
background-repeat:no-repeat;
background-position:center center;
}

#thumbList a:hover {
background-color:#84c1ff;
border-color:#0080ff;
}

图片必须定义为CSS的background-image属性,才能使用这个方法。从显示效果来看,背景图片和IMG标签引入的前景图片没有差别(当然从HTML的语义来看是有差别的)。

如果想按比例缩小,最好是在服务端就缩小好并缓存起来,这样可以节省带宽。在某些不能使用服务端脚本的特殊情况下,则只好用JavaScript实现,且上述背景图片的方案不适用。

2. CSSZ中如何使用一张比盒模型小的图片填满整个盒模型,且不重复。是在HTML中导入的,不做背景。

可以这样子写
<div class="box"><img src="../images/1.jpg" width="100%"></div>
<style>
.box{500px;margin:0 auto;}
.box img{display:block;}
</style>
这里面的div就是你所说的盒模型,宽度的样式自己根据需要定义,图片的宽度一定要设置成100%,路径换成你自己的图片路径

阅读全文

与css怎么设置图片和外层盒子一样大相关的资料

热点内容
大红色托特包配什么颜色衣服图片 浏览:565
民国二十文图片及价格 浏览:218
易学素描简单图片 浏览:220
戚薇的发型图片短发 浏览:620
冬季主题墙幼儿园简单图片 浏览:994
比较适合男生做头像的图片 浏览:129
25岁文字图片 浏览:911
女扮男装可爱图片 浏览:675
观音菩萨衣服图片大全 浏览:974
可爱的菠萝妹图片 浏览:375
荣耀锁屏图片如何保存 浏览:426
小男孩疝气图片女孩 浏览:597
洋气发型短发图片 浏览:543
男生孤独冬季图片 浏览:701
背新图片和价格 浏览:602
在抖音中如何把图片保存到相册里 浏览:374
word怎么添加图片数据源 浏览:255
小女孩搬椅子简笔画图片 浏览:113
光脚拎鞋走路的女孩的图片 浏览:782
憨厚老实图片男生 浏览:935