demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Basic CSS For Images: Sizing And Float

css / images

Estimated reading time: 3 minutes

At a minimum, an image placed in an HTML document needs the following information:

<img src="xs-shirt.png" alt=
Extra-Small Shirt" />

In the example above the image will display on the web page at its native or natural size. If the image cannot be seen for any reason, the alt attribute value will be used used as a text substitute. Note that the file name also indicates the content of the image.

If the image is used for purely decorative purposes and has no semantic intent, alt must still be set, but should be equal to null (i.e. alt="").

To remain valid in XHTML, the image must be in the context of a block element: a heading, a list item, a div etc. We’ll use a paragraph, and add an inline style to the image:

<p><img src="xs-shirt.png" alt="Extra-Small Shirt" style="width: 200px; height: 200px; float: right; margin-left: 2em;"  />Shirts from the TightWaist Company are made using 100% natural cotton in a manufacturing process that avoids the harsh chemical treatments and waste of traditional techniques.</p>

Note that the position of the <img /> code inside the paragraph matters: moving the <img /> within the paragraph changes where the text wraps around the image.

Images do not have to be floated, but without applying CSS text does not wrap around the image: instead, the lower edge of the image lines up with the baseline of the text in the block.

A few final hints and tips:

  • Inline styles are often used on images, as the size, orientation and position of images is often unique. Images that share the same display properties can be addressed more efficiently via an embedded or linked style by using a class or descendant selector.
  • Unless you are building a web page, the height and width values for the image should be set to the actual height and width of the image in pixels. Do not try to use CSS to create “thumbnails” of images – use or another bitmap editor to create new versions of the image instead.
  • Don’t use PhotoShop to create borders on images. Doing so inevitably increases the number of pixels in an image, increasing file size; borders added in PhotoShop also mean that you must return to the application in order to make any changes. It is far more efficient to create .
  • Images that are inside an <a> tag will automatically have a blue border applied in older browsers. To remove this, set the border style for the image to an value of 0, or none. (This is often done as part of a CSS Reset)
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.