css property for picture help

[dsp77]

Hello, what i try to accomplish is to force the bigger picture(726px) to go/hide under the div(500px) but display the first 500px. Any advise?

<div style="width:500px;"><a href="#"><img width="726" height="199" src="images/pic1.jpg"></a></div>

[cssfreakie]

the first advice is separate concerns, Use an external stylesheet. makes your code less sloppy, and it's easier to maintain, faster and less ugly.

second, always use an alt=" " attribute on images.

third, don't change the size of the image in html, use the size that is suitable otherwise you load a larger image than needed and that's a waste.

fourth use indentation.

 

make an external stylesheet and do this

css

div.my-image{ /*target the div element with the class of my-image */
   width:500px;
   overflow:hidden; /* cut off the image at 500px width */
   /* you can set a height for the image */
}

 

in your html

<div class="my-image">
   <a href="#"><img alt=" "src="images/pic1.jpg"></a>
</div>

 

Hope this helps!

[dsp77]

Thank you, i was using the overflow on the img. p.s i know about the external css etc i just posted fast:)

 

thank you again

[cssfreakie]

no problemo