自适应状态下图片的缩放问题

Start-ZJ

于 2019-08-08 15:40:06 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 # CSS

本文链接：https://blog.youkuaiyun.com/qq_38054172/article/details/98873384

36 篇文章

订阅专栏

9 篇文章

订阅专栏

本文介绍了一种在自适应网页设计中使图片随DIV容器一同缩放的方法，通过将图片高度设置为100%，使其与父级DIV高度绑定，实现图片自适应效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到了一个问题，就是在制作自适应网页时DIV中的图片无法做到同div一同缩放。后来发现以下代码可以解决。

这个是H5的代码
<div class="badyOneBlock1Photo">
    <img src="Imagry/photo.png" alt="" class="badyOneBlock1Photo1">
</div>

CSS代码：
.badyOneBlock1Photo{
    width: 1.7rem;
    height: 1.9rem;
}
.badyOneBlock1Photo1{
    height: 100%;
}

这段代码的意思是首先将图片的高度与图片所在的父div的高度绑定，所以一旦div开始自适应高度进行变化的时候，图片的大小也会随着div的大小进行变化。