In article ,
PW wrote:
How do I do this without distorting the picture? The picture is about 10 inches by 6 inches and I want to do a "banner" with it for my website and also for perhaps stationary, etc…
I can’t figure out how to do this!
That might seem to be asking how one can pull someone’s head off while yet leaving it on! <g>
Anyway, you must be aware that one cannot stretch a picture in one dimension without actually distorting it. But there is distortion and perception of distortion! With the right landscape, it could be hard to tell which is the natural and which is the stretched.
Perhaps you are also asking how to stretch an image in PS? That is easy, just get the image resize dialog box and untick the keep proportion box and assign a bigger width to it.
About website banners. There are different ways to stretch an image in the HTML and CSS. First, the simple way of assigning it a percentage width:
img.landscape {display:block; width:100%;}
for
<img class="landscape" src="landscape.jpg" alt="">
The other way is to use the image as a background image:
..landscapeHolder {width: 100%; background: #fff url(landscape.jpg);}
<div class="landscapeHolder"></div>
The danger here is that if you set the image to ‘repeat-x’, it might not be to your liking. If you set to no-repeat, it would simply stop and the white (or whatever colour you choose) would show.
There is a more sophisticated solution. This consists in using an HTML image, not a background, placed to left *and* a background image in the containing element. You can make the background image to repeat the right hand end of the main image. If, for example, the right hand end is plain sky or rolling hills or something a bit bland, then it could be quite natural looking for it to repeat along horizontally. No distortion!
—
dorayme