7352Re: [NH] setting width of a graphic
- Jan 19, 2014Interviewed by CNN on 19/01/2014 12:27, Mike Breiding - Morgantown WV
told the world:
> Greetings,Well, as Margaret explained, setting the width of the container box
> I am trying to adjust the size of the weather sticker on this page:
> I added: <div style="width: 250px">
> and changed the original SPAN width from 350 to 250px but this does has
> no effect.
> Any ideas?
won't affect automatically the width of the contained objects, if they
have their own set widths.
If the contained object/image is larger than the (fixed-size) container,
the container won't be stretched; instead, the object will overflow the
limits of the container. This can be better understood by setting
visible, contrasting borders and/or background-colors for all involved
objects and containers.
In the case of images, even if you don't explicitly set width and height
parameters, the browser will check the actual dimensions of the image
file AND ACT AS IF THOSE WERE EXPLICITLY SUPPLIED and therefore treat
the image as a fixed-size object. (Except that this information won't be
available on the initial page load, causing a redraw when the browser
finally gets around to download the image. Avoiding this redraw is the
reason why supplying explicit dimensions for images is usually encouraged).
However, there is a way to make an image adjust to the container. Just
set the "width" parameter of the image to a percentage instead of a
fixed value (say, "100%" if you want the image to take the full width of
the container). This leverages the fact that browsers, when supplied
with just *one* of the dimensions of a image, will resize the image
proportionally in *both* dimensions in order to keep the image aspect
A pair of related styles that are very useful if you use percentage
widths are "max-width" and "min-width."
I use these to make auto-resizable images (and entire pages, for that
For instance, for text pieces, very long lines are tiresome to read, so
I want to avoid 2000-px width columns on widescreen monitors. However,
if I set a fixed width for the container (like, say, 900 px) I run the
risk of introducing horizontal scrolling in a smartphone, which is an
horrible user experience. So in many text-only pages I use this style:
Say now I have a large illustration in that text piece -- like, an
800x600px image. I want it to shrink in small screens, but I don't want
it to be actually stretched beyond the dimensions of the image (which
often introduces unpleasant visual artifacts). So I place it like this:
<div style="width:100%; max-width:800px; margin: 1em auto;">
<img src="example.jpg" width="100%" alt="This is a sample">
This message has been protected with the 2ROT13 algorithm. Unauthorized use will be prosecuted under the DMCA.
... Sent from my Z-Machine.
* Added by TagZilla 0.7a1 running on Seamonkey 2.23 *
Get it at http://xsidebar.mozdev.org/modifiedmailnews.html#tagzilla
- << Previous post in topic Next post in topic >>