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“.
Incorrect – image dimensions are incorrect in the HTML source code
Correct.
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 5×2 pixels
Actual Size 5×2 pixels
Image stretched: HTML dimensions of this image is set to 180×2 pixels.
Image stretched: HTML dimensions of this image is set to 75%x2 pixels (75% of this table cell)
BasicTemplates.com designs Website Templates with External CSS and has been providing webmasters worldwide with affordable template designs since 1994. BasicTemplates currently offers 650+ designs which may be purchased individually or get complete access to all templates via an affordable membership plan. Most templates were strategically designed with interchangeable graphics and elements to increase the potential number of design layouts for the end user. Each layout utilizes an external style sheet for easy site maintenance and to ensure fast page load.
