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!

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.

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.

<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

#content {
float:left;
padding:20px;
width:520px;
overflow:none;
}
#content ol, #content ul {
margin-left:3em;
}

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

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.

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.

Maybe something like this:
css:

#content {
float:left;
padding:20px;
width:520px;
overflow:none;
}

html:

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

tried this, it didn't work. thanks for your help, i just cropped a new image.

Originally Posted by imhr

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.

Sizing the container appropriately, then setting the image as a no-repeat background is also a method.

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

True, but it is an option to be considered given this;

Is there a way, with HTML or CSS to limit the vertical size of the image without resizing