分享一款CSS3和HTML5圖片加工前后對比代碼。這是一款通過CSS3和HTML5將圖像轉換為自動響應的元素；圖像縮放和裁剪以適應容器。效果圖如下：

在線預覽? ??? 源碼下載

實現(xiàn)的代碼。

html代碼：

      <div id="intelligence" class="section">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    <img src="images/explorer.jpg" />
                    <br />
                    <br />
                    <p class="text-center">原始圖像</p>
                    <br />
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 text-center">
                    <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                    <br />
                    <br />
                    <div class="frame-container"><div class="frame frame-square"><img src="images/explorer.jpg" /></div></div>
                    <br />
                    <p>廣場</p>
                </div>
                <div class="col-md-4 text-center">
                    <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                    <br />
                    <br />
                    <div class="frame-container"><div class="frame frame-landscape"><img src="images/explorer.jpg" /></div></div>
                    <br />
                    <p>景觀</p>
                </div>
                <div class="col-md-4 text-center">
                    <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                    <br />
                    <br />
                    <div class="frame-container"><div class="frame frame-portrait"><img src="images/explorer.jpg" /></div></div>
                    <br />
                    <p>肖像</p>
                </div>
            </div>
        </div>
    </div>

    <div class="divider"></div>

    <div id="customizable" class="section">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h2>站長素材</h2>
                    <p>照片加工前后對比</p>
                    <p class="coding">
                        <span class="colored">#HTML</span>
                        <br />
                        &lt;div style="width: 300px; height: 150px;"&gt; <br /> &nbsp; &lt;img src="yourimage.jpg" <br /> &nbsp; <span class="colored">data-positionx="right"</span> <br /> &nbsp; <span class="colored">data-positiony="top"</span>/&gt; <br /> &lt;/div&gt;
                    </p>
                </div>
                <div class="col-md-4 text-center">
                    <br />
                    <div class="frame-container"><div class="frame frame-full"><img src="images/traveler.jpg" /></div></div>
                    <br />
                    <p>標準</p>
                </div>
                <div class="col-md-4 text-center">
                    <span class="special-arrow glyphicon glyphicon-menu-down" aria-hidden="true"></span>
                    <br />
                    <div class="frame-container"><div class="frame frame-optimum"><img src="images/traveler.jpg" /></div></div>
                    <br />
                    <p>最適合的圖像</p>
                </div>
            </div>
        </div>
    </div>

    <div class="divider"></div>
    

? via： http://www.w2bc.com/article/55875