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

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K 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 displayed used as a text substitute. Note that the the content of the image is also indicated in the file name.

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="" or, in HTML5, simply alt, with no value).

To remain valid in XHTML, the image must be in the context of a block element: a heading, a list item, a div etc. For exampe, in a paragraph, with 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 image within the paragraph changes how and where the text wraps around it. For this reason, the same approach (images inside block tags) is recommended for HTML5, although it is not required by the specification.

Images do not have to be floated, but without CSS, text will 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:

  • As a general rule, images that are floated to the left within body text should have margin applied to their right, and vise-versa, to provide a visual “gutter” between text and illustrations.
  • Inline styles are often used on images, as the size, orientation and position of pictures on a web page 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.