分享一款CSS3和HTML5图片加工前后对比代码。这是一款通过CSS3和HTML5将图像转换为自动响应的元素；图像缩放和裁剪以适应容器。效果图如下：

在线预览    源码下载

实现的代码。

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

在线预览    源码下载