Styling Images

Images have certain behaviors within a page, including how and where they appear and react with surrounding and nearby elements. To declare images in the <style> element, use the element selector img {}.

Sizing Images

You may have images of all different sizes you want to include in your page, but once there, you’d like them all to be the same width for consistency. Instead of adding width values to all your <img> tags, you can do it across all images on the page using the width property.

Note This means your image tags do not need width values; for example, <img src="#" alt="" title="" />

img {
  width: 100px;
}

Floating Images

Remember?
That images are inline elements that appear “within” or adjacent to neighboring elements.

To override where images appear, you can use the float property to effectively direct the flow of adjacent elements, either to the left or right.

For example, using float: left; will place the image to the left, and elements below will flow around it. The opposite is true of float: right;.

img {
  float: left;
}

Example

See how you can manipulate an image’s size and placement with width and float!