導航:首頁 > 動漫圖片 > 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怎麼設置圖片和外層盒子一樣大相關的資料

熱點內容
10歲女生畫動漫人物圖片 瀏覽:2
胸小如何搭配衣服圖片 瀏覽:991
如何截下word上的一張圖片 瀏覽:236
軍綠色的裙子怎麼搭配圖片 瀏覽:159
說說評論怎麼加圖片 瀏覽:973
臉萌女生圖片 瀏覽:369
word可編輯圖片格式 瀏覽:278
對鏡閃光燈拍照女生圖片 瀏覽:584
如何突出圖片的某一部分文字 瀏覽:781
白色衣服上的筆跡圖片 瀏覽:911
小圓臉適合燙什麼發型圖片 瀏覽:464
播放可愛膠帶的圖片 瀏覽:551
芭比娃娃簡單的衣服圖片大全圖片大全圖片 瀏覽:368
男生和男生的圖片唯美 瀏覽:639
WPS平板版word圖片尺寸 瀏覽:732
專利圖片及文字 瀏覽:795
小學女生尿道圖片 瀏覽:716
搞錢女孩圖片卡通圖片 瀏覽:809
酷家樂如何渲全景圖片 瀏覽:109
嬌媚到可愛的圖片 瀏覽:855