这篇文章主要介绍了使用css样式实现动态图片裁剪示例,需要的朋友可以参考下
使用样式实现动态图片裁剪
复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"></p>
<p><html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></p>
<p> <title>untitled</title></p>
<p> <style type="text/css" media="screen"> div.crop { height: 300px; width: 350px; overflow: hidden; } div.crop img { margin: -300px -200px 0 0; } </style></p>
<p></head></p>
<p><body></p>
<p><div class="crop"> <img src="paper-sculpture-large.jpg" class="crop" alt="Paper Sculpture Large"> </div></p>
<p></body> </html>
|