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

Question

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標籤裡的 圖片顯示不全 如何能讓它以正常比例顯示完全 求解！

Answer 1

使用百分比關係，原理：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 得出比例 */
}

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

Answer 2

img{
顯示：塊；
最大寬度：100%；
}

Answer 3

將圖片用背景載入
然後設定
background-size:contain
background-repeat: no-repeat

Answer 4

用rem佈局，會隨著螢幕大小而改變

Answer 5

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

Answer 6

• 頁面佈局

  <p style=“width: 100%; overflow: hidden”>
      <img style="width: 100%" src="images/1.jpg" >
  </p>
  

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

img元素一般都要包含在盒子裡面的，主要是方便操作和選擇。