Monaen's WikiResponsive Images 2017-03-17

Suggestions

  1. Note: There MUST be a space on each side of the + and - operators. (A space is not required around * and / as the problem is an ambiguity around negation.) For example: calc(100px - 10%) will work. calc(100px-10%) will not.

  2. 100vh, 100vw, corresponding to the 100 percent of the viewport height or viewport width.

Examples

  1. The way to show three images in a row with 10px gap between each two of them.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style>
        body {
          margin: 0;
        }
        img {
          float: left;
          width: calc((100% - 20px)/3);
          margin-right: 10px;
        }
        img:last-of-type{
          margin-right: 0;
        }
    </style>

How to choose the right image format

  1. Image formats
  2. Image optimization
  3. More about WebP
  4. Browser support for WebP

Image process for webpage

  1. ImageMagick:
  1. Grunt:
  1. Files used in scripting examples:
  1. Image processing tools:

Resources

Relative Sizing

Here are some examples compared to know the properties of responsive images

▲