Posted By

eethann on 09/20/07


Tagged

css textmate html


Versions (?)

Who likes this?

18 people have marked this snippet as a favorite

Hirmine
basicmagic
bartekk
robotoverlord
LeeRJohnson
vali29
pagetoscreen
fernandaparisi
SpinZ
tonic
jonhenshaw
hans
titox
hekama
zander
bobbym245
seanpowell
michellebracken


css crop


 / Published in: HTML
 

dynamically crop (but not resize) an image using css. Could add sizes to the img css to change size but it will look crap.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.  
  7. <title>untitled</title>
  8.  
  9. <style type="text/css" media="screen">
  10. div.crop {
  11. height: 300px;
  12. width: 350px;
  13. overflow: hidden;
  14. }
  15. div.crop img {
  16. margin: -300px -200px 0 0;
  17. }
  18. </style>
  19.  
  20. </head>
  21.  
  22.  
  23. <div class="crop">
  24. <img src="paper-sculpture-large.jpg" class="crop" alt="Paper Sculpture Large">
  25. </div>
  26.  
  27. </body>
  28. </html>

Report this snippet  

You need to login to post a comment.