Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

HTML Forum


You are currently viewing our HTML Forum as a guest. Please register to participate.
Login



Post a Project »

Find a Professional HTML Freelancer!

Find a Freelancer to help you with your HTML projects

FREE Outsourcing eBook!

Reply
Cropping, not resizing an image
Old 05-05-2008, 11:23 AM Cropping, not resizing an image
Skilled Talker

Posts: 93
Name: David Howland
Location: New England
Trades: 0
I'm pretty sure that this belongs in the HTML forum, although CSS might be the answer. I'm not sure. On the front page of my site, Frigid Light Photography I have an image which links to the newest photography album on the site. When i first coded the site I was dealing with a standard size image (scaled down to 520 px to fit the layout). I now want to use an image with different dimensions. Scaling the image to 520px wide produces an image which does not fit into the layout. Is there a way, with HTML or CSS to limit the vertical size of the image without resizing? I'd like to have it cropped off automatically, if possible. THanks!
davidhowland14 is offline
Reply With Quote
View Public Profile Visit davidhowland14's homepage!
 
 
Register now for full access!
Old 05-05-2008, 11:52 AM Re: Cropping, not resizing an image
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Quote:
Is there a way, with HTML or CSS to limit the vertical size of the image without resizing?
Well.. yes and no. You can't change the size of the image, but you can limit how much of it is displayed with CSS by setting overflow:none on the div the image is displayed in.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 05-05-2008, 12:36 PM Re: Cropping, not resizing an image
Skilled Talker

Posts: 93
Name: David Howland
Location: New England
Trades: 0
is there a way to set the amount displayed in that particular <div> to a certain pixel value? I changed overflow to none and it just pushed my sidebar down to below the content. Here's the relavent code.

Code:
<div id="content">
		<h1>Latest Content</h1>
<a href="/gallery/main.php?g2_itemId=166"><img src="/gallery/main.php?g2_view=core.DownloadItem&g2_itemId=178" width=520px></a>
</div>
and the CSS

Code:
#content {
float:left;
padding:20px;
width:520px;
overflow:none;
}
#content ol, #content ul {
margin-left:3em;
}
davidhowland14 is offline
Reply With Quote
View Public Profile Visit davidhowland14's homepage!
 
Old 05-05-2008, 01:30 PM Re: Cropping, not resizing an image
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Well.. you could try the clip property:
http://www.w3schools.com/CSS/pr_pos_clip.asp
http://www.seifi.org/css/creating-th...-property.html

However, clipping works on an absolutely positioned element.

I'm sorry.. should be overflow:hidden .. my bad:
http://www.w3.org/TR/CSS21/visufx.html
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 05-05-2008, 02:43 PM Re: Cropping, not resizing an image
Super Moderator

Posts: 1,576
Location: Kokkola, Finland
Trades: 1
crop part of the image that makes it look good at 520 wide in an image editor - if you have to crop it anyway then do it there rather than in the html/css.
davemies is online now
Reply With Quote
View Public Profile Visit davemies's homepage!
 
Old 05-05-2008, 03:18 PM Re: Cropping, not resizing an image
Skilled Talker

Posts: 93
Name: David Howland
Location: New England
Trades: 0
yeah, i was hoping for a way to not have to create multiple copies of the image. obv i could copy it. ladynred, I tried the overflow property and no such luck.
davidhowland14 is offline
Reply With Quote
View Public Profile Visit davidhowland14's homepage!
 
Old 05-05-2008, 06:43 PM Re: Cropping, not resizing an image
angele803's Avatar
Perfectly Imperfect

Posts: 1,774
Name: Stephanie
Location: Oklahoma
Trades: 2
Maybe something like this:
css:
Code:
#content {
float:left;
padding:20px;
width:520px;
overflow:none;
}
html:
Code:
<div id="content">
		<h1>Latest Content</h1>
        <div class="image">
			<a href="/gallery/main.php?g2_itemId=166"><img src="/gallery/main.php?g2_view=core.DownloadItem&g2_itemId=178" width=520px></a>
		</div>
</div>
This is what ladynred suggested. I'm just elaborating.

You can set the height of that div to whatever you want. If the picture is taller than that specified height, it will be cropped off at the bottom.
__________________

Please login or register to view this content. Registration is FREE
angele803 is offline
Reply With Quote
View Public Profile
 
Old 05-05-2008, 07:54 PM Re: Cropping, not resizing an image
Skilled Talker

Posts: 93
Name: David Howland
Location: New England
Trades: 0
tried this, it didn't work. thanks for your help, i just cropped a new image.
davidhowland14 is offline
Reply With Quote
View Public Profile Visit davidhowland14's homepage!
 
Old 05-06-2008, 03:23 AM Re: Cropping, not resizing an image
Super Moderator

Posts: 1,576
Location: Kokkola, Finland
Trades: 1
Quote:
Originally Posted by imhr View Post
I think that this situation may be resolved only by putting blank both sides or boh ends.
well no, not if you crop the image to fit those dimenions - which is what the OP did.
davemies is online now
Reply With Quote
View Public Profile Visit davemies's homepage!
 
Old 05-06-2008, 04:36 AM Re: Cropping, not resizing an image
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,516
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Sizing the container appropriately, then setting the image as a no-repeat background is also a method.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 05-06-2008, 05:35 AM Re: Cropping, not resizing an image
Super Moderator

Posts: 1,576
Location: Kokkola, Finland
Trades: 1
but setting it as a background means that you don't have so much control over where it cuts off the image - at least, you're restricted to top, bottom, left, right, or trying to move it over by so many pixels

so much easier to just crop it in photoshop or whatever, rather than all these sledgehammer-to-crack-a-nut techniques
davemies is online now
Reply With Quote
View Public Profile Visit davemies's homepage!
 
Old 05-06-2008, 06:30 AM Re: Cropping, not resizing an image
chrishirst's Avatar
Missing! presumed drunk.

Posts: 41,516
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
True, but it is an option to be considered given this;
Quote:
Is there a way, with HTML or CSS to limit the vertical size of the image without resizing
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- I SEO the only industry where all the cowboys are Indians?
chrishirst is online now
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Reply     « Reply to Cropping, not resizing an image
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 8.94910 seconds with 12 queries