Loading ...
Sorry, an error occurred while loading the content.

7352Re: [NH] setting width of a graphic

Expand Messages
  • Marcelo Bastos
    Jan 19, 2014
      Interviewed by CNN on 19/01/2014 12:27, Mike Breiding - Morgantown WV
      told the world:
      > Greetings,
      > I am trying to adjust the size of the weather sticker on this page:
      > http://epicroadtrips.us/2014/az/temp/
      >
      > I added: <div style="width: 250px">
      > and changed the original SPAN width from 350 to 250px but this does has
      > no effect.
      >
      > Any ideas?

      Well, as Margaret explained, setting the width of the container box
      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
      ration.

      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
      matter).

      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:

      body {width:1oo%;
      max-width:900px;
      margin-left:auto;
      margin-right:auto;}

      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">
      </div>


      --
      MCBastos

      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
    • Show all 5 messages in this topic