DevWebPro

Most of the time stretching an image by setting incorrect image sizes within the HTML code would distort it horribly. Below is a review of the example comparisons from our related article, "Adding Text to Images: The Right Way".

So why then after looking at the examples above would you sometimes have a good reason to stretch an image? Let's suppose that using a horizontal divider border with CSS in a particular area of your page will not work for whatever reason, or you are not familiar enough with CSS to feel comfortable using it. An alternative for a horizontal divider border or line separator would be a small tiny image that you stretch to whatever length in pixels or percentage you choose. Below is an illustration of this easy effect.

Actual Size 5x2 pixels Actual Size 5x2 pixels

Image stretched: HTML dimensions of this image is set to 180x2 pixels. Image stretched: HTML dimensions of this image is set to 75%x2 pixels (75% of this table cell)