stretch the image

[Mr. X.]

Hello.
How can I stretch the image :
<img src= ... />

Thanks

 

[Ari Heino]

... Stretch the image :

1. relative to the whole browser.
2. relative to the current page.

Use <img id="img-id" ... />

in html and

#img-id {
width: 25%; /* or any other relative unit */
}

in css.

Stretching images is IMO a bad idea, but I guess you have a good example
to give how to use it.

 

[Chris F.A. Johnson]

Use <img id="img-id" ... />

in html and

#img-id {
width: 25%; /* or any other relative unit */
}

in css.

Stretching images is IMO a bad idea,

I disagree. There is nothing wrong with resizing images in the
browser; however:

Don't supply a very large image and let the browser shrink it;
that is a waste of bandwidth and will be slow.

If you expect an image to be enlarged, check that the image is
of high enough quality to survive enlargement. (The ImageZoom
add-on for Firefox is good for testing this.)

 

[dorayme]

Hello.
How can I stretch the image :
<img src= ... />

Thanks

<http://dorayme.890m.com/alt/rel_sizing_100percent_face.html>

<http://dorayme.890m.com/alt/rel_sizing_100percent.html>

 

[Ari Heino]

<http://dorayme.890m.com/alt/rel_sizing_100percent.html>

In this case it's not a good idea to define both width and height,
beacause the picture doesn't look good. Use one and let the browser
define the other.

 

[Ari Heino]

You gave just the reasons why I think it needs serious consideration.
One could argue that from point A we conclude you can't shrink images
and from point B that you can't enlarge them. Is there any other types
of stretching left?

 

[dorayme]

<http://dorayme.890m.com/alt/rel_sizing_100percent_face.html>
<http://dorayme.890m.com/alt/rel_sizing_100percent.html>

In this case it's not a good idea to define both width and height,
beacause the picture doesn't look good. Use one and let the browser
define the other.[/QUOTE]

No doubt you are right it would not be good for many pictures in many
contexts It was a demo for where you want 100% both ways and I grabbed
it quickly... I had a perfect case once that looked fantastic but people
grumbled about it.

You can see it for yourself by opening either of the above in FF
developer and substituting for the picture: pics/crimson.png

You might concede that 100% both ways might be ok for a website on funny
mirrors? <g>

 

[Ari Heino]

You can see it for yourself by opening either of the above in FF

developer and substituting for the picture: pics/crimson.png

One could achive the same with background image, yes?

 

[dorayme]

You can see it for yourself by opening either of the above in FF
developer and substituting for the picture: pics/crimson.png

One could achieve the same with a background image, yes?[/QUOTE]

It would look for all the world the same to a human, yes. (But not to
me.)

Here is a pic that stretches pretty good widthwise while holding a fixed
height (it looks worse if the height is left to the browser to adjust
from the native proportions)

<http://dorayme.890m.com/alt/rel_sizing_100percent_but_fixed_height.html>

Just occasionally a pic as a pic rather than a background image can be
suitable for a banner for such stretching effect. Background images can
also be used but they are often more trouble to concoct. What I
sometimes like doing is having a fixed image and a background where the
latter is some blander section of the right hand side of the fixed image
and able to be repeated in the horizontal direction to give a reasonably
natural effect. The above is not an example of this.

 

[David Segall]

I disagree. There is nothing wrong with resizing images in the
browser; however:

Don't supply a very large image and let the browser shrink it;
that is a waste of bandwidth and will be slow.

If you expect an image to be enlarged, check that the image is
of high enough quality to survive enlargement. (The ImageZoom
add-on for Firefox is good for testing this.)

Doesn't the above advice imply that you should start with the minimum
acceptable quality image at the expected _maximum_ size?

 

[Chris F.A. Johnson]

[I assume you were replying to my post, so I have quoted it for
reference.]

You gave just the reasons why I think it needs serious consideration.
One could argue that from point A we conclude you can't shrink images

That's not what I said. Note the words "very large". I wouldn't
supply an inage 1600x1200 for display in the 300-500 range. I might
use a 600-wide,

and from point B that you can't enlarge them.

That's not what I said, either. I said to check whether the image
survives enlargement. If it does, use it; if not, don't.

 

[Chris F.A. Johnson]

Doesn't the above advice imply that you should start with the minimum
acceptable quality image at the expected _maximum_ size?

Why futz around with an image that already works?

 

[Nik Coughlin]

Use <img id="img-id" ... />

in html and

#img-id {
width: 25%; /* or any other relative unit */
}

in css.

Stretching images is IMO a bad idea, but I guess you have a good example
to give how to use it.

Actually, sometimes it's a very good idea, to ensure that an image which is
fixed width by nature (px) can never escape it's variable width (em, % etc)
parent container

#img-id {
max-width: 100%;
}

As the page authour you know that most of the time the parent will be big
enough to contain the image but when it isn't max-width assures that it
scales appropriately.

In reality it's a little more complex than the example above, due to
non-compliance from everybody's favourite browser and also because some
browsers don't see fit to maintain the image's aspect ratio when only
max-width is set (without a little more work anyway), but other than those
caveats it is a sound technique.

 

[Ari Heino]

Stretching images is IMO a bad idea, but I guess you have a good

Actually, sometimes it's a very good idea, to ensure that an image which
is fixed width by nature (px) can never escape it's variable width (em,
% etc) parent container

Yep, that IS a good idea indeed. Problematic with IE, though, as you said.

 

[Mr. X.]

What about :
stretching the image when it is a background-image in div.

div1
{
position:absolute;
top:0px;
left:500px;
width:100%;
height:100%;
background-image:url('images/my_img.jpg');
background-repeat:no-repeat;
background-size:auto;
}

What should I do in order the background-image will be 50% width & height ?

Thanks

 

[Els]

What about :
stretching the image when it is a background-image in div.

Impossible. We have said so in some replies in this thread.

 

[dorayme]

What about :
stretching the image when it is a background-image in div.

div1
{
position:absolute;
top:0px;
left:500px;
width:100%;
height:100%;
background-image:url('images/my_img.jpg');
background-repeat:no-repeat;
background-size:auto;
}

What should I do in order the background-image will be 50% width & height ?

Thanks

Hi Mr X, I am fascinated by your Question Campaign. A storm of rapid
fire in many newsgroups (I am sure I saw you in Photoshop too?). <g>

A tip, and it applies to the present question, do have a look at the
past posts on the subjects of your interest. I recall quite a few that
have dealt with stretching questions.

May I suggest you take a break from absolute positioning, it is a tricky
tool and it is best to master other more common and useful fundamentals
first.

Usually, when you want a stretching effect via background images, you
use repeat in the direction you want to give the appearance of
stretching. But you cannot stretch a background image in the real sense
that you stretch a foreground one via <img... width="100" ...>. The
image you use in a background has a natural size and it will be that
size, you can repeat it or not.

But there are all sorts of tricks and controls you can employ with both
foreground and background images. Depending on the nature of the pic,
you can certainly sometimes give the appearance of stretching and even
position such images:

<http://netweaver.com.au/centring/page5.html>