Skip to main content

Week 04

Responsive Images​

Why are responsive images needed?

  • resize automatically based on screen size
  • have better performance as higher resolution images are only loaded when needed
  • provide better design control depending on device

By setting a relative unit, images will be fluid and resize accordingly.

E.g. width: 100%; instead of width: 400px;

For images to never scale larger than the original size:

max-width: 100%;

For images to fit into a box automatically:

background-size: cover;

Note​

In this week, we also learned how to use git and github. However, as I have prior experience using github, I did not add any notes for this section.