圖片排列水平置中，比例縮放

Posted on Edited on In Views: Disqus:

 

圖片排列置中，比例縮放的範例如下

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        body, ul {
            padding: 0;
            margin: 0;
        }

        .menu {
            list-style-type: none;
            position: relative;
            float: left;
            width: 33%;
        }

        img {
            width: 100%;
        }

        .main_nav {
            position: absolute;
            top: 40vh;
            margin: 0 26% 0 26%;
        }
    </style>
</head>
<body>
    <ul class="main_nav">
        <li class="menu">
            <img src="http://i.imgur.com/R8dXEY8.png?1">
        </li>
        <li class="menu">
            <img src="http://i.imgur.com/R8dXEY8.png?1">
        </li>
        <li class="menu">
            <img src="http://i.imgur.com/R8dXEY8.png?1">
        </li>
    </ul>
</body>
</html>

1、先把一些會影響視覺設計的預設樣式給歸零

2、將li塊狀元素的排列方式改成float:left並給予寬度33%(因為有三個圖示)

3、img元素寬度設成100%，這樣才能做到等比縮放的效果。

4、外層的ul塊狀元素使用position: absolute避免其他元素不必要的位置干擾，

剩下就是根據實際狀況客製化數值做水平置中的效果了。

5、另外一個進階的範例請參考範例檔。