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='https://www.haobala.com/wenda/images/1.jpg' ></p>

父级元素用百分比确定宽度或者用width确定，img做100%处理会自动铺满父级窗口。如果使用，请把css样式分离