css实现高度自适应和宽度一至【等宽高】

来源:赵克立博客 分类: 前端设计 标签:css发布时间:2019-03-17 00:46:21最后更新:2019-05-15 09:20:31浏览:285
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
温馨提示:
技术类文章有它的时效性,请留意文章更新时间以及软件的版本
更新时间:
2019-05-15 09:20:31

布局中常用到把图片限制到指定的大小,宽度们我可以直接设置成百分比来自适应但是高度却不能设置,但是要吧得用css中padding-bottom属性来把高度撑起来实现目的,如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>标题</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
</head>
<body>
    <div class="imgwrap">
        <img src="http://t00img.yangkeduo.com/goods/images/2018-08-28/54107879f41707a968cc9c0b01d693c3.jpeg">
    </div>
    <style type="text/css">
    .imgwrap {
        margin: 0px auto;
        position: relative;
        padding-bottom: 15%;
        width: 15%;
        height: 0px;
    }
    .imgwrap img {
        max-width: 100%;
        max-height: 100%;
        position: absolute;
    }
    </style>
</body>
</html>

父元素相对定位,高设置为0宽度按百分比,下内边距设置成跟宽一至,子元素(图片绝对定位)且最大宽高都为100%


image.png


微信号:kelicom QQ群:215861553 紧急求助须知
点击更换验证码
Win32/PHP/JS/Android/Python