css讓不同大小的圖片適應(yīng)div的大小，且不變形。

娣辯孩發(fā)布于2019-04-23 13:44 / 3394人閱讀

摘要：做成背景圖片單個(gè)你要的正方形你要的正方形居中填滿多個(gè)循環(huán)時(shí)

做成背景圖片

單個(gè)

.imgdiv {
    width: 100px;     // 你要的正方形
    height: 100px;    // 你要的正方形
    background-image: url(/your/image/path.jpg);
    background-position: center center;    // 居中
    background-size: cover;                // 填滿div
    background-repeat: no-repeat;
}

多個(gè)循環(huán)時(shí)：

云服務(wù)器 GPU云服務(wù)器圖片大小自適應(yīng) 圖片的大小html php查看圖片的大小 php輸出圖片的大小

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/2284.html

相關(guān)文章

【CSS練習(xí)】IT修真院--練習(xí)5-護(hù)工個(gè)人界面

摘要：任務(wù)五一個(gè)最常見的移動(dòng)端頁面完成的事情學(xué)習(xí)張鑫旭世界相關(guān)章節(jié)張鑫旭系列了解通配符選擇器性能優(yōu)化瀏覽器渲染原理學(xué)習(xí)各屬性及效果完成任務(wù)五學(xué)習(xí)編碼規(guī)范編碼規(guī)范并按照編碼規(guī)范優(yōu)化代碼完成深度思考計(jì)劃的事情找時(shí)間把前面任務(wù)的官方提供鏈接過一遍，查缺任務(wù)五、一個(gè)最常見的移動(dòng)端頁面完成的事情 float學(xué)習(xí) 張鑫旭《CSS世界》相關(guān)章節(jié) 張鑫旭 float系列了解CSS通配符 &...

Jonathan Shieber 2019-08-29 15:42 評(píng)論0 收藏0
《CSS世界》筆記一：流/元素/尺寸

摘要：一流體布局引出的幾種網(wǎng)頁布局方式布局方式描述特點(diǎn)場景靜態(tài)布局，傳統(tǒng)設(shè)計(jì)，網(wǎng)頁上的所有元素的尺寸一律使用作為單位。世界中，提出了流體布局的概念所謂流體布局，指的是利用元素流的特性實(shí)現(xiàn)的各類布局效果。下一篇：《CSS世界》筆記二：盒模型四大家族寫在前面初讀《CSS世界》還是在深圳，屬于換工作前的充能。那時(shí)候除了工作，其他時(shí)間基本都在這本書里了，因?yàn)樗拇_吸引人。之前看過《CSS揭密》...

hizengzeng 2019-08-30 15:54 評(píng)論0 收藏0
CSS題目及答案整理

摘要：解決方案為加上使其形成，根據(jù)規(guī)則第六條，計(jì)算高度時(shí)就會(huì)計(jì)算的元素的高度，達(dá)到清除浮動(dòng)影響的效果。并為這個(gè)外層元素設(shè)置，使其形成。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。它的所有子元素自動(dòng)成為容器成員，稱為項(xiàng)目，簡稱項(xiàng)目。原文鏈接在這里 CSS 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有兩種， IE 盒子模型（相當(dāng)于box-sizing: bor...

lijy91 2019-08-29 12:34 評(píng)論0 收藏0
用css繪制各種形狀

摘要：同樣的方法可以實(shí)現(xiàn)下面這種布局具體代碼如下通過把改成或，就可以立即得到左側(cè)傾斜或右側(cè)傾斜的標(biāo)簽頁。簡單的餅圖的繪制思路是把圓形的左右兩部分指定為上述兩種顏色，然后用偽元素覆蓋上去，通過旋轉(zhuǎn)來決定露出多大的扇區(qū)。自適應(yīng)的橢圓 1.自適應(yīng)的橢圓實(shí)現(xiàn)方式是通過border-radius這個(gè)屬性；border-radius它可以單獨(dú)指定水平和垂直半徑。用 / 分隔這兩個(gè)值。并且該屬性的值不...

Lionad-Morotar 2019-08-29 12:30 評(píng)論0 收藏0
文檔流&文字&CSS常用命令

摘要：文檔流文檔流就是文檔內(nèi)元素流動(dòng)方向流動(dòng)方向內(nèi)聯(lián)元素從左往右流，寬度不夠，之字形，且元素會(huì)被截?cái)鄩K元素從上往下流動(dòng)，一排一排注意事項(xiàng)內(nèi)聯(lián)元素中有英文單詞，流動(dòng)時(shí)寬度不夠，英文單詞會(huì)整體遷移，不會(huì)被打斷若想打斷上述聯(lián)結(jié)，請(qǐng)使用屬性想打斷的內(nèi)聯(lián)元文檔流文檔流就是文檔內(nèi)元素流動(dòng)方向流動(dòng)方向內(nèi)聯(lián)元素從左往右流，寬度不夠，之字形，且元素會(huì)被截?cái)? 塊元素從上往下流動(dòng)，一排一排 sho...

zebrayoung 2019-08-30 14:13 評(píng)論0 收藏0