advanced code snippet search

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.

Expand | Embed | Plain Text 
  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. <head>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.  
  8. 	<title>untitled</title>
  9.  
  10. 	<style type="text/css" media="screen">
  11. 	 div.crop {
  12. 	   height: 300px;
  13. 	   width: 350px;
  14. 	   overflow: hidden;
  15. 	 }
  16. 	 div.crop img {
  17. 	   margin: -300px -200px 0 0;
  18. 	 }
  19. 	</style>
  20.  
  21. </head>
  22.  
  23. <body>
  24.  
  25. <div class="crop">
  26. <img src="paper-sculpture-large.jpg" class="crop" alt="Paper Sculpture Large">
  27. </div>
  28.  
  29. </body>
  30. </html>

Report this snippet  

You need to login to post a comment.