Scalified - Outsource Frontend Development

Nowadays, most of the modern websites are using images for various purposes. Starting from visual content and ending with rich UI/UX, images may represent any kind of information in a more convenient and easy way. However, there are several ways how images can be used in frontend development, depending on particular UI and requirements. In this article we’re going to briefly go through the most popular ways to manipulate images in HTML/CSS and also we’ll see how images can be scaled/centered to achieve better user experience.

Images Basics

Most widely used way to add an image is to use HTML-tag <img>. It’s supported by all the browsers starting from IE1. By default, it will add full-sized image to the page:

<img src="https://goo.gl/vktRic"/>

Second option is to use background-image CSS-property, when image sized to it’s container. Therefore, we need to create an HTML-element and apply a CSS-class:


<style type="text/css">
  .image {
    background-image: url(https://goo.gl/vktRic);
  }
</style>
 
<div class="image"></div>

Since image size depends directly on the element where background-image CSS-property is set, in the example above we have a situation where image is not shown at all. To see the image we need to set the container’s size, e.g like this:

.image {
  background-image: url(https://goo.gl/vktRic);
  border: 5px solid #AAF;
  width: 300px;
  height: 150px;
}

background-image in fixed sized div

By default, the background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. So, if image size is bigger than container, it will be cropped, if smaller – it will be repeated. For example, when we apply the smaller image as a background-image for previous container, we’ll have the following result:

Smaller image repeated

The background-image CSS-property is supported by all browsers starting from IE5. Hovewer there are multiple features added due to CSS3 standard that are not supported in older browsers till IE8. Let’s have a look at some of these features, e.g. we can specify multiple images in background-image property:

Multiple images as background property

The other convenient way of adding pictures is to use :before, :after CSS-selectors along with content CSS-property. Suppose we need to add custom image as a bullet in a list:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

We can easily achive this by applying the following CSS:

ul {
  border: 5px solid #AAF;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  content: url(https://goo.gl/ooorJ6);
  max-width: 10px;
  height: 10px;
}

Custom Bullet Image

In general, all of the mentioned ways are well supported by modern browsers, but we’d recommend to use <img> tag for some visual content and background-image for UI styling.

Note, that usage of .svg images for both <img> and background-image is supported starting from IE9 ang higher.

Images Scaling/Centering with CSS

In previous examples we’ve seen how image size on the page may either depend on original picure dimensions when using <img> HTML-tag, or to be limited by container’s width and height. Let’s assume that we want some image to be proportionally scaled to some fixed size. For sure, we could just use the same static size for images as well, but it may require backend processing, especially when images might be uploaded by users. Fortunately there’re couple of other ways to achieve this on frontend only.

Scaling Images within <img>-tag

There’re two simple properties we can specify when using <img> HTML-tag: width and height. However, if original image dimensions are too much different than the values specified in width and height the result image will be deformated. To avoid deformation we can wrap the image by a fixed sized container. For example:

<style type="text/css">
  div {
    border: 5px solid #AAF;
    height: 150px;
    width: 200px;
  }
</style>
 
<div>
 <img src="https://..."/>
</div>

We want to scale the image horizontally so that it would be centered vertically. To achieve this we can adjust our CSS:

div {
  position: relative; //added this
  border: 5px solid #AAF;
  height: 150px;
  width: 200px;
}

//added this
img {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  margin: auto;
}

Here’s the result:

Image centered vertically

As you can see, we’ve got a desired result except that now image overfills the container. To crop it we can change our CSS by adding overflow: hidden; to the div’s style.

Cropped image centered vertically

This method will work for browsers starting from IE8. For older browsers centering won’t be working and image will be applied to the top edge of the container.

Bottom cropped image

So, browser support of this method is very good, hovewer the disadvantage is that centering works either vertically or horizontally. Thus, if we try to replace previous image with another one where width is larger than height we might get white-spaces at the top/bottom of the scaled image.

Scaled image with whitespaces

In the end we’ll give an advice how to fix this issue, and now let’s have a look at how to achieve the same results using background-image CSS-property. Using background-image actually helps to avoid the mentioned issue pretty easy. To demonstrate it we can create an empty div and apply this CSS:

div {
  border: 5px solid #AAF;
  background-size: cover;
  background-position: center center;
  height: 150px;
  width: 200px;
  background-image: url(https://some-image-with-larger-height.jpg);
}

Cropped image centered vertically

We’ve used background-position, background-size CSS-properties. Last one scales image to container’s size taking both image width and height into account, so here’s how one of our previous examples will look like:

Scaled image with no whitespaces

Though this method is less verbose it’s supported starting from IE9 and higher.

Well, obviously background-image gives us more control than <img>-tag, but moving step backward, is there any way to keep using <img> and scale images properly? The answer is yes, but only by using polyfills or custom js code, so it’s not really trivial solution. It might be needed when older browsers support is required (IE8 and older), but in general it’s recommended to use background-image for this purpose.

We hope this article has given you insights about using images in modern web development, so don’t hesitate to share it in social networks 😉 Have a great day and follow Scalified to read more frontend development articles!

Denys Koval - Frontend Engineer at Scalified

Denys Koval

Frontend Engineer at Scalified