[CSS] Images

Images are represented with <img> elements in HTML. In HTML5, many of its attributes are deprecated and CSS will replace them.

1. <img> Element

The <img> element is used to display an image and has the following attributes:

  • src : the URL of an image
  • alt : the alternate text for an image
  • width / height : display size

In HTML5, the following attributes are not supported anymore :

  • align
  • border
  • hspace
  • vspace
  • longdesc
<img src="images/big.png" alt="Test Image" width="200" height="150" />

 

2. Image Width and Height

You know CSS supports “width” and “height” properties for almost all elements. What are the differences between the CSS properties and the attributes when it comes to an image?

img { width:200px; height:150px; }

In browsers, both will render the image identically. So what can you do?

The best practice is to set the “width” and “height” attributes all the time. It helps broswers to determin the dimesion of image while downloding the file. You can tweak the image size using CSS and JavaScript afterwards.

 

3. Alignment

The “align” attribute of the <img> element is removed in HTML5. <img> is an inline element so you need to be careful to align images.

The first option is to use the “text-align” property for an container element.

<div style="text-align:center">
  <img src="images/big.png" alt="Test Image" />
</div>

The more popular way to align an image is to make it float to text.

<div>
  <img src="images/big.png" alt="Test Image" style="float:left" />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc massa, rutrum sed mattis at, porta placerat risus. Donec suscipit, tortor ut tristique commodo, diam risus aliquet elit, in tincidunt libero velit eget justo.
</div>

The “vertical-align” property can be directly used to the <img> element to control how to locate the image vertically.

<div>
  <img src="images/big.png" alt="Test Image" style="vertical-align:middle;" />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc massa, rutrum sed mattis at, porta placerat risus.     Donec suscipit, tortor ut tristique commodo, diam risus aliquet elit, in tincidunt libero velit eget justo.
</div>

Note that it is different from the floating layout.

 

4. Background Images

Images can be used as a background images using the “background-image” property. You can specify the image file with the “url(…)” syntax.

body { background-image:url('../images/back.png'); }

 

5. Opacity

The “opacity” property sets the degree of opacity from 0 (transparent) to 1 (opaque).

<!DOCTYPE html>
<html>
  <head>
    <title>Opacity</title>
    <link rel="Stylesheet" href="CSS/image.css" />
    <script src="../Scripts/jquery.js"></script>
    <script>
    $(document).ready(function () {
      $('#opacityMeter').on("change", function () {
        $("#myImg").css("opacity", $('#opacityMeter').val());
      });
    });
    </script>
  </head>
  <body>
    <section>
      <header>
        <h1>Images</h1>
      </header>
      <div>
        <img id="myImg" src="images/big.png" alt="Test Image" style="opacity:0.5; vertical-align:middle;" />
        Opacity: <input id="opacityMeter" type="number" max="1" min="0" step="0.1" value="0.5" />
      </div>
    </section>
  </body>
</html>

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s