advanced search

We Recommend

HTML: The Definitive Guide HTML: The Definitive Guide
They teach you that learning HTML is like learning any other language and that reading a book of rules can only take you so far. Readers begin writing what may be their first Web page just two pages into the book's second chapter. From there on, they provide a wide range of HTML coding to allow readers to learn from good examples. The book includes a handy "cheat sheet" of HTML codes for quick reference.

Posted By

eethann on 09/20/07


Tagged

css textmate html


Versions (?)


Who likes this?

10 people have marked this snippet as a favorite

Hirmine
basicmagic
bartekk
robotoverlord
LeeRJohnson
vali29
pagetoscreen
fernandaparisi
SpinZ
tonic


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.


Plain TextExpand 
  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.