Object-fit

Reference

• How an element responds to the height and width of its content box.
• Values:
  • fill: Stretch the image to fit the content box, regardless of aspect ratio.
  • contain: Increase or decrease the size of the image to fill the box whilst preserving its aspect-ratio.
  • cover: Fill the height and width of the box to maintain the aspect-ratio, often cropping the image in the process.
  • none: Ignore height/width of parent and retain its original size.
  • scale-down: Compare the difference between none and contain in order to find the smallest concrete object size.
• Not supported in IE though!

Musings

• Creating an observable from data:

export class MockTransactionService {
  getTransactions(params: HttpParams = new HttpParams()): Observable<Transaction[]> {
    return of(mockTransactions);
  }
}

• background-size: auto 97% is sort of like background-cover, but you’ll have an allowance on the right side
• For interpolating variables in calc, you can do this: width: calc(#{$variable-a} - #{$variable-b} - 50px);