不用css3的響應式img（按比例縮小圖片）

本文轉載自查看原文 2016-08-12 10:08 4821 html

有時候自己為了控制圖片的響應式，按比例縮小放大圖片，如果解決這個問題，用js吧，很麻煩、也會損失很大的加載運行速度等；所以我們還是用css來解決這個問題，用css來強制按比例壓縮圖片的高度或寬度，看代碼不說話：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;}
            ul,li{margin: 0;padding: 0;list-style: none;}
            
            .detail{
                width: 100%;
            }
            .detail ul{
                width: 100%;
                padding: 5px;
                overflow: hidden;
            }
            .detail ul li{                
                float: left;
                width: 50%;
            }
            .detail ul li a{
                display: block;
                width: 100%;
            }
            .detail ul li .imgBox{
                width: 100%;
                height: 0;
                padding-bottom: 60%;
                overflow: hidden;
                position: relative;
            }
            .detail ul li .imgBox img{
                display: block;
                width: 100%;
                height: 100%;
                position: absolute;
            }
            
            
            .aBox{
                display: block;
                width: 300px;
                height: 300px;
                position: relative;
                background-color: #ccc;
            }
            .aSmall{
                position: absolute;
                left: 0;
                top: 0;
                width: 100px;
                height: 50px;
            }
        </style>
    </head>

    <body>
        <div class="detail">
            <ul>
                <li>
                    <a href="">
                        <div class="imgBox">
                            <img src="http://images.cnblogs.com/cnblogs_com/shoestrong/866556/o_see.jpg" alt="" />
                        </div>
                        <div class="textBox">
                            這是文字信息
                        </div>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div class="imgBox">
                            <img src="http://images.cnblogs.com/cnblogs_com/shoestrong/866556/o_see.jpg" alt="" />
                        </div>
                        <div class="textBox">
                            這是文字信息
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </body>

</html>

這是一個圖文混排的小栗子，你放大或縮小頁面，你發現了什么？你明白了嗎？

可參考：https://jsfiddle.net/boxiang_hbx/wrf4xshn/4/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3 實現圖片等比例放大與縮小 css如何實現圖片響應式等比例縮放，裁剪 CSS3中的background－size(對響應性圖片等比例縮放) 理解CSS3中的background－size(對響應性圖片等比例縮放) 用css3實現圖片的放大縮小 css3 transition 實現圖片放大縮小 css3響應式布局教程—css3響應式 html中如何讓圖片按比例響應式縮放、並自動裁剪的css技巧 CSS圖片Img等比例縮放且居中顯示 CSS3響應式滑動菜單