html - CSS如何處理圖片縮放問題？
問題描述
HTML結(jié)構(gòu)`<dl onclick='goDetail(1)' class='cookbook-list'> <dt class='cookbook-img'><img src='http://s1.cdn.xiangha.com/cai... </dt> <dd class='cookbook-name'>排骨飯</dd> <dd class='cookbook-des'>補(bǔ)陽壯陽 補(bǔ)腎 滋陰補(bǔ)腎 氣血雙補(bǔ) </dd></dl>`
.cookbook-list { display: block; height: 13.2rem;}.cookbook-list dt { width: 100%; height: 10rem; position: relative; overflow: hidden;}.cookbook-list img { width: 100%;}
img標(biāo)簽里的 圖片顯示不全 如何能讓它按照正常比例顯示完全 求解！
問題解答
回答1：使用百分比關(guān)系，原理：p>img，其中 p 標(biāo)簽為相對(duì)定位，高度為一個(gè)百分比，img 使用絕對(duì)定位，撐滿父級(jí)對(duì)象，代碼如下：
/* 圖片等比縮放 */.scaling { background-color: #fafafa; font-size: 0; height: 0; // 去除高度 position: relative;}.scaling > img { height: 100%; left: 0; position: absolute; top: 0; width: 100%;}/* 圖片等比縮放 */.scaling.scaling-4-3 { padding-bottom: 75%; /* (300/400)*100 (高度/寬度)*100 得出比例 */}
其寬度根據(jù)實(shí)際寬度而定，依你的頁面而言，其寬度應(yīng)為屏幕寬度或其父級(jí)容器的寬度，如果其父級(jí)是可自由變換的，那么，其高度就會(huì)根據(jù)比例關(guān)系進(jìn)行等比縮放。
回答2：img{ display: block; max-width: 100%;}
回答3：將圖片用背景加載然后設(shè)置background-size:containbackground-repeat: no-repeat
回答4：用rem布局，會(huì)隨著屏幕大小變化
回答5：給圖片加一個(gè)樣式img{width:100%;}
回答6：頁面布局
<p style=“width: 100%; overflow: hidden”> <img src='http://www.aoyou183.cn/wenda/images/1.jpg' ></p>
父級(jí)元素用百分比確定寬度或者用width確定，img做100%處理會(huì)自動(dòng)鋪滿父級(jí)窗口。如果使用，請(qǐng)把css樣式分離
img元素一般都要包含在盒子里面的，主要是方便操作和選擇。相關(guān)文章：
1. mysql日期類型默認(rèn)值’0000-00-00’ 報(bào)錯(cuò)2. 求救一下，用新版的phpstudy，數(shù)據(jù)庫過段時(shí)間會(huì)消失是什么情況？3. mysql replace 死鎖4. mysql - C#連接數(shù)據(jù)庫時(shí)一直這一句出問題int i = cmd.ExecuteNonQuery();5. MYSQL 根據(jù)兩個(gè)字段值查詢 但兩個(gè)值的位置可能是互換的，這個(gè)怎么查？6. extra沒有加載出來7. android - 安卓做前端，PHP做后臺(tái)服務(wù)器 有什么需要注意的？8. javascript - 微信網(wǎng)頁開發(fā)從菜單進(jìn)入頁面后，按返回鍵沒有關(guān)閉瀏覽器而是刷新當(dāng)前頁面，求解決？9. php傳對(duì)應(yīng)的id值為什么傳不了啊有木有大神會(huì)的看我下方截圖10. mysql - ubuntu開啟3306端口失敗,有什么辦法可以解決？
網(wǎng)公網(wǎng)安備