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元素一般都要包含在盒子里面的，主要是方便操作和选择。