Latest Contest Winners
SotW #9 Winner: Kronus


Pure Creativity :: The Gates :: The Swap Meet :: Fake-cropping - View Topic
Topic Rating: *****
Printable View
Administrator
*****
webmaren
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
pmwwwmsnaim
OFFLINE
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:
Select All
 
  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:
Select All
 
  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:
Select All
 
  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.
Back to Top - Link to Post
Image
 Printable View

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