html - Wie geht CSS mit der Bildskalierung um?

Question

HTML-Struktur
`<dl onclick="goDetail(1)" class="cookbook-list">
<dt class="cookbook-img"> .cdn.xiangha.com/cai...
</dt>
<dd class="cookbook-name">Schweinerippchen-Reis</dd> Tonisieren Sie Yang, stärken Sie Yang, nähren Sie die Niere, nähren Sie Yin, nähren Sie Niere, Qi und Blut</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%;

}

Das Bild im img-Tag wird nicht vollständig im normalen Verhältnis angezeigt.

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