Latest Contest Winners
SotW #9 Winner: Kronus


Pure Creativity :: The Gates :: The Swap Meet :: Fake-cropping - View Topic
Topic Rating: *****
Printable View
Administrator
*****
Arch Vizier
[Avatar]
There's nothing wrong with red shirts.
Posts: 516
Gender: Male
Location: Maryland, USA
Joined:  
Class: Archmage, 2nd Degree
Points: 2,705
Reputation: 4
Fake-cropping (27th Jun 10 at 2:30pm UTC)
Technique I picked up recently for "cropping" images that are just slightly too big on a page. All you need to do this is some basic knowledge of HTML and CSS.




First, set up your image on the page in a div with a nice class or id for cropping.

Code:
 
  1. <div class="fakecrop">
  2.     <img src="http://myhost.com/myimg.jpg" alt="my image"/>
  3. </div>
 


Now, the fun part. We'll use CSS to make the image look like it's cropped.

Code:
 
  1. .fakecrop {
  2.     width: 200px;
  3.     height: 200px;
  4.     overflow: hidden;
  5. }
 


The width and height will set up the size of your cropping box, and then the overflow line makes everything outside the box disappear.

Of course, right now, the box only crops from the upper-left corner of your image, which might not be what you want. To fix that, we need a little more CSS.

Code:
 
  1. .fakecrop > img {
  2.     margin-top: -20px;
  3.     margin-left: -100px;
  4. }
 


This moves the top of the image 20 pixels behind the top of the div, and 100 pixels behind the left edge.

Hope you learned something from this tutorial.

Image
 Printable View

RETURN TO TOP
All times are GMT+0 :: The current time is 8:10pm
Page generated in 4.1231 seconds
Purchase Ad-Free Credits
This Forum is Powered By vForums (v2.4)
Create a Forum for Free | Find Forums