问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

两张宽度不同高度相同的图片，如何自适应左右布局呢？

头像
苹果
    11962435

    有两张宽度不同高度相同的图片，需要自适应左右布局，若是设百分比width，左45%，右55%，两张图片的高度就不同了，怎么通过css实现呢

    cssjavascript
    阅读 4.5k
    1 个回答
    得票最新
    头像
    vinvent
      573
      ✓ 已被采纳

      图片描述

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <div class="container_left">
                    <img src="small.png" alt="" />
            </div>
            <div class="container_right">
                    <img src="common.png" alt="" />
                </div>
            </div>
        </div>
    </body>
    <style type="text/css">
        .container_left{
            display: inline-block;
            float: left;
            width: 45%;
            
        }
        .container_right{
            display: inline-block;
            float: left;
            width: 55%;
        }
        
        img{
            width: 100%;
        }
        
    </style>
</html>

      实现思路：利用pading-top比例值和width比例值都基于父亲，在外层包裹一层div(.img_box),占位，让子元素（img）绝对定位填充满。

      调整后：等高

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div>
            <div class="container_left">
                <div class="img_box">
                    <img src="small.png" alt="" />
                </div>
            </div>
            <div class="container_right">
                <div class="img_box">
                    <img src="common.png" alt="" />
                </div>
            </div>
        </div>
    </body>
    <style type="text/css">
        .container_left{
            display: inline-block;
            float: left;
            width: 45%;
            
        }
        .container_right{
            display: inline-block;
            float: left;
            width: 55%;
        }
        
        .container_left .img_box{
            width: 100%;
            padding-top:100% ;
            position: relative;
        }
        
        .container_right .img_box{
            width: 100%;
            padding-top: 82%;
            position: relative;
        }
        
        
        .img_box img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
    </style>
</html>

      图片描述

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题