JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>

<div ng-app="myApp" layout="column" layout-fill="" class="layout-fill ng-scope layout-column"> 
  <div flex="" style="background: red;" class="flex">
    <h1>Title</h1>
    <p>Details. Blablabla.</p> 
  </div>
  <div flex="60" style="background: blue;" class="flex-60">
    <!-- <img id="myImg" ng-src="http://placehold.it/200x400" src="http://placehold.it/200x400"> -->
    <!-- Should work with such extreme case as well -->
    <img id="myImg" ng-src="http://placehold.it/1000x200" />
  </div>
</div>

<style>

</style>
    <script type="text/javascript">
        angular.module("myApp", ["ngMaterial"]);
    </script>

CSS

img{

  
  object-fit: cover;
    max-width: 100%;
    height: 100%;
}