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ǔ)陽(yáng)壯陽(yáng)補(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)籤裡的 圖片顯示不全 如何能讓它以正常比例顯示完全 求解！
6
0
0
業(yè)精于勤，荒于嬉;行成于思，毀于隨。
使用百分比關(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è)面而言，其寬度應(yīng)為屏幕寬度或其父級(jí)容器的寬度，如果其父級(jí)是可自由變換的，那麼，其高度就會(huì)根據(jù)比例關(guān)係進(jìn)行等比縮放。
將圖片用背景載入
然後設(shè)定
background-size:contain
background-repeat: no-repeat
頁(yè)面佈局
<p style=“width: 100%; overflow: hidden”>
<img style="width: 100%" src="images/1.jpg" >
</p>
父級(jí)元素用百分比確定寬度或用width確定，img做100%處理會(huì)自動(dòng)鋪滿父級(jí)視窗。如果使用，請(qǐng)把css樣式分開(kāi)
