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标签里的 图片显示不全 如何能让它按照正常比例显示完全 求解！

解决方案

使用百分比关系，原理：div>img，其中 div 标签为相对定位，高度为一个百分比，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 得出比例 */
}

其宽度根据实际宽度而定，依你的页面而言，其宽度应为屏幕宽度或其父级容器的宽度，如果其父级是可自由变换的，那么，其高度就会根据比例关系进行等比缩放。

这篇关于html - CSS如何处理图片缩放问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！