宽度自适应

最新推荐文章于 2023-11-04 18:58:10 发布

zenkle

最新推荐文章于 2023-11-04 18:58:10 发布

阅读量923

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_35142645/article/details/100662071

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

给图片添加一个容器将其放进去，为了实现图片的自适应，将此容器height设为0，通过padding-bottom设置宽度比继承其父元素宽度并按照宽度比设置此容器的高度，之后将图片塞进去，图片的一边设置比例另一边也会根据比例相应的缩放。

如果不添加容器对图片直接做自适应样式设置，图片的高度为0，高度撑不开也就无法显示出来

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div>   
<img src='http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg'>
</div>
</body>
</html>
<style type="text/css">
    div{
        width: 100%;
        height: 0;
        padding-bottom: 55%;/*会根据父元素的宽度实现高度比，此时父元素为body*/
        overflow: hidden;
    }
    img{
       width: 100% 
    }
</style>