html - CSS如何處理圖片縮放問題？

問題描述

HTML結構`<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'>補陽壯陽 補腎 滋陰補腎 氣血雙補 </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標簽里的 圖片顯示不全 如何能讓它按照正常比例顯示完全 求解！

問題解答

使用百分比關系，原理：p>img，其中 p 標簽為相對定位，高度為一個百分比，img 使用絕對定位，撐滿父級對象，代碼如下：

/* 圖片等比縮放 */.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 得出比例 */}

其寬度根據實際寬度而定，依你的頁面而言，其寬度應為屏幕寬度或其父級容器的寬度，如果其父級是可自由變換的，那么，其高度就會根據比例關系進行等比縮放。

img{ display: block; max-width: 100%;}

將圖片用背景加載然后設置background-size:containbackground-repeat: no-repeat

用rem布局，會隨著屏幕大小變化

給圖片加一個樣式img{width:100%;}

頁面布局

<p style=“width: 100%; overflow: hidden”> <img src='http://www.wxshucaidpc.com/wenda/images/1.jpg' ></p>

父級元素用百分比確定寬度或者用width確定，img做100%處理會自動鋪滿父級窗口。如果使用，請把css樣式分離