# Images

• When you set the width and height of an image in CSS, it overwrites the settings of the HTML width and height attributes
• In the example below:
  • The first image has only width and height attributes on the img tag (400px * 300px)
  • The second image (#img2) has the same width and height attributes on the img tag (400px * 300px), but in CSS the width and height is set to 200px * 150px
• CONCLUSION: As soon as you write the image dimensions in CSS, you may omit the width and height attributes in HTML!

# Responsive images

• Images sometimes have very annoying side effects, even with a proper viewport meta tag
  • Left: the width of the image is smaller than the viewport
  • Middle: the width of the image is larger than the viewport, so a horizontal scroll bar appears (when you touch the screen)
  • Right: the image is made responsive, which means that the image is scaled such that its width fits inside the screen's viewport

• For a responsive image, you set
  • the max-width (or width) to 100%
    • Use max-width if the image width can't be larger than its original width
    • Use width if the image width may be larger than its original width (the image is enlarged/upscaled)
  • the height to auto

img {
    max-width: 100%;     /* use `width` instead of `max-width` if the image is also allowed to scale up */
    height: auto;
}

• Open this pen in a new browser window to see the difference between the two images

# Crop/resize images

• First, take a quick look at the example: images with different breakpoint
  • On a small and large screen, all images are in landscape mode and are responsive
  • On a medium screen, all images are in portret mode and have a fixed width and height
• There are two ways to accomplish this:
  • The hard way with Photoshop and JavaScript 😏
    • Open Photoshop and make two versions for every image (a landscape version and a portret version)
    • Add some JavaScript to switch between the different image versions at different breakpoints
  • The easy way with pure CSS 😃
    • Use the CSS property object-fit to crop and/or resize the original image on different breakpoints
    • Use the CSS property object-position to position the cropped image
• Let's start with a simple example to explain these two properties

• Let's start with three images with different dimensions
  • Left image: 270px * 180px
  • Middle image: 600px * 200px
  • Right image: 300px * 500px

# object-fit: fill (default)

• Give all images a fixed width and height

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

• Only the first image looks fine because it has the same aspect ratio as the CSS properties
• The two other images are scaled but squeezed/stretched to fit into the image box
• If you don't specify the object-fit property, the browser uses object-fit: fill; as the default setting

# object-fit: contain

• All images are scaled to fit into the image box but maintain their original aspect ratio

img {
    width: 300px;
    height: 200px;
    object-fit: contain;
}

# object-fit: none

• Only images that are larger than the box dimensions are scaled down to fit into the image box
• All images maintain their aspect ratio, but some parts are clipped

img {
    width: 300px;
    height: 200px;
    object-fit: none;
}

# object-fit: cover (most used)

• All images are scaled up or down to fit into the image box
• All images maintain their aspect ratio, but some parts are clipped

# object-position

• As you can see in the above examples, images are centered (both horizontally and vertically) by default
• You can change the position with the object-position property, e.g:

img {
    width: 300px;
    height: 200px;
    object-fit: none;
    object-position: top left;
}

• The values for object-position (see also interactive example) are the same as for background-position:
  • first value for vertical positioning: top, center, bottom or use fixed units like px, %, ...
  • second value for horizontal positioning: left, center, right or use fixed units like px, %, ...
  • horizontal and vertical positioning values are interchangeable:
    object-position: top left; = object-position: left top;

# Example

# Small screen (below 600px)

• All images are responsive

img {
    width: 100%;
    height: auto;
}

# Medium screen (between 600px and 800px)

• All images
  • have a fixed width and height
  • are cropped symmetrically (around the center/middle)

img {
    width: 125px;
    height: 200px;
    object-fit: cover;
}

# Larger screen (above 800px)

• All images are responsive again

img {
    width: 45%;
    height: auto;
}

# Oversized background image on body

• The following example/exercise demonstrates how to set a fixed, oversized background image on the body (or on the html element)
• Let's start with a background-color and a background-image of 800px * 600px on the body
  • As you now know from a previous chapter, the background will copy itself horizontally and vertically
• Open the pen below in full screen mode to see the effect

# Exercise

• Follow these three steps to transform the background into a static, fullscreen background image
  1. Cover the background with the whole image: background-size: cover;
     • Depending on the size of the browser window, you only see a small portion of the original image
     • By default, you see the top left corner of the image
  2. Fix the background image (so it doesn't scroll with the content of the page) with background-attachment: fixed;
  3. Position the background image, e.g. background-position: top center;

# Filters

• One of the nice recent features in CSS3 is the addition of filters on images which reduces the need to use photo editing programs

• Some examples:

# Clipping path

• Another new, but not yet widely supported feature is clip-path

• A good site to help you in creating such a clip-path is https://bennettfeely.com/clippy/
  • A number of sample images are used in combination with predefined shapes that you can adjust
  • Keep a close eye on the dimensions of the image you want to clip
  • The code you need to copy into CSS can be found at the bottom left

.t {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 20%, 65% 20%, 65% 100%, 35% 100%, 35% 20%, 0% 20%);
    clip-path: polygon(0 0, 100% 0, 100% 20%, 65% 20, 65% 100%, 35% 100%, 35% 20%, 0% 20%);
}