简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 两张宽度不同高度相同的图片，如何自适应左右布局呢？
伊谢尔伦
伊谢尔伦 2017-04-11 12:41:51
0
1
479

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全員に返信(1)
左手右手慢动作
左手右手慢动作2017-04-11 12:43:51 1棟 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>
            <p class="container_left">
                    <img src="small.png" alt="" />
            </p>
            <p class="container_right">
                    <img src="common.png" alt="" />
                </p>
            </p>
        </p>
    </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比例值都基于父亲，在外层包裹一层p(.img_box),占位，让子元素（img）绝对定位填充满。

调整后：等高

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>
            <p class="container_left">
                <p class="img_box">
                    <img src="small.png" alt="" />
                </p>
            </p>
            <p class="container_right">
                <p class="img_box">
                    <img src="common.png" alt="" />
                </p>
            </p>
        </p>
    </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>

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！