JSFiddle - React, Tailwind, and code Playground

by camel2243

HTML

<div class="original-image">
  <p>original image</p>
  <img src="http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Chrome-icon.png"> 
</div>

<div>
  <p>object-position: 50% 50%;</p>
  <img class="image--center" src="https://blog.camel2243.com/wp-content/uploads/App-Chrome-icon.png">
</div>

<div>
  <p>object-position: 100% 100%;</p>
  <img class="image--bottom-right" src="https://blog.camel2243.com/wp-content/uploads/App-Chrome-icon.png">
</div>

<div>
  <p>object-position: 0  100%;</p>
  <img class="image--bottom-left" src="https://blog.camel2243.com/wp-content/uploads/App-Chrome-icon.png">
</div>

CSS

img {
  background-color: yellow;
  height: 170px;
  width: 300px;
  object-fit: scale-down;
}

.image--center {
  object-position: 50% 50%;
}

.image--bottom-right {
  object-position: 100% 100%;
}

.image--bottom-left {
  object-position: 0  100%;
}