object-fit & object-position

index.haml

- @values = ['fit','contain','cover','scale-down','none']

.container{'ng-app'=>'myApp'}
  .panel
    img {
    %label
      = precede '  ' do
        height:
      = succeed 'px;' do
        %input{"type"=>"number","ng-model"=>"height","ng-init"=>"height=100"}
    %label
      = precede '  ' do
        width:
      = succeed 'px;' do
        %input{"type"=>"number","ng-model"=>"width","ng-init"=>"width=300"}
    %label
      = precede ' ' do
        %a{:href=>"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit", :target=>"_blank"}
          object-fit:
      = succeed ';' do
        %select{"ng-model"=>"fit","ng-init"=>"fit='fit'", "ng-options"=>"option as option for option in #{@values}"}
    %label
      = precede ' ' do
        %a{:href=>"https://developer.mozilla.org/en-US/docs/Web/CSS/object-position", :target=>"_blank"}
          object-position:
      = succeed ';' do
        %input{"type"=>"text","ng-model"=>"position",:placeholder=>"<position> <position>"}
    }
  .display
    .frame{:style=>"width: {{width}}px; height: {{height}}px;"}
      %img{:src => "https://farm6.staticflickr.com/5614/14958042803_896839aac9_c.jpg", :alt => "", :style=>"object-fit: {{fit}}; object-position: {{position}}; width: {{width}}px; height: {{height}}px;"}

object-fit & object-position.markdown

object-fit & object-position

Explore the object-fit property.

object-fit sizes/clips/scales the image relative to its height and width - similar to background-size.

object-position moves the image's position relative to its height and width - similar to background-position.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

A Pen by Katy DeCorah on CodePen.

License.

script.js

var myApp = angular.module('myApp',[]);

scripts

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

style.scss

@import "compass/css3";

$body-bg: #ecf0f1;
$dorito: #2c3e50;
$accent: #3498db;

* { box-sizing: border-box;}

html,
body, 
.container {
  width: 100%;
  height: 100%;
}

body {
  transform: translate3d(0, 0, 0);
  background: $body-bg;
  color: $dorito;
  font-size: 14px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
}

.panel {
  font-family: "Monaco", monospace;
}

label {
  display: block;
  margin-top: 1em;
  margin-bottom: .25em;
}

select, input {
  font-size: 1em;
  font-family: inherit;
  background: $body-bg;
  color: $dorito;
  border: none;
  background: #fff;
  height: 2em;
  padding: 0 .5em;
  border-radius: .5em;
  margin-right: .2em;
  
}

input {
  max-width: 100px;
}

.panel, .display {
  .no-flexbox & {
    width: 45%;
    float: left;
  }
}

.frame {
  outline: 1px solid $accent;
}

img {
  transition: .2s;
}

a {
  text-decoration: none;
  color: $accent;
  
  &:hover {
    color: lighten($accent, 10%);
  }
}

styles

<link href="http://codepen.io/katydecorah/pen/8e2eaced137c3f2e0ae4991a7d132767" rel="stylesheet" />