CSS: Responsive Design

Media Queries for Standard Devices | CSS Tricks

1. scale images

.container{
  width: 50%;
  height: 200px; 
  overflow: hidden;
}
.container img{
  max-width: 100%; 
  height: auto; 
  display: block;
}

---

2. scale background-images

div{
  background-image: url();
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

---

3.

• The minimum and maximum width of elements can be set using min-width and max-width.
• Horizontal and vertical padding and margin are set relative to the width of a parent element.
• When the width of an image or video is set, then its height can be set to auto so that the media scales proportionally. eg:

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

• height: 100% sets the element at 100% height of its parent container height: auto means the element height will depend upon the height of its children