JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<div class="image-item-component" style="width: 200px;">
  <div class="image-item-sizer">
    <a class="imate-item-wrapper" href="">
      <img class="image-item image-item-exclusive" src="http://34.204.129.156:5050/photos/2018/04/the-morgan-library--museums-annual-spring-luncheon/gallery_901e05fc-1edf-431a-9246-4f1e508968d7.JPG" alt="Image title">
      <span class="image-item-flag">EXCLUSIVE</span>
    </a>
  </div>
  <div class="image-item-info">
    <p class="image-item-title">Stirling Barrett, Georgia Fowler</p>
    <div class="image-item-details">
      <p>1748558</p>
      <a href="#">The KREWE x CFDA Disaster Relief Event</a>
      <p>2017-11-09</p>
    </div>
  </div>
</div>

CSS

.image-item-component
{
  width: 100%;
  height: auto;
  border: solid 1px red;
  text-align: center;
}

.image-item-sizer
{
  box-sizing: border-box;
  width: 100%;
  height: 0;
  background: gray;
  padding: 0 0 68% 0;
  position: relative;
}

.imate-item-wrapper
{
  width: 100%;
  height: 100%;
  background: gainsboro;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-item
{
  max-width: 100%;
  max-height: 100%;
}

.image-item-placeholder
{
  background: orange;

}

.image-item.image-item-exclusive
{
  box-sizing: border-box;
  padding-bottom: 20px;
  background: rgb(7, 157, 236);
  max-height: 100%;
}

.image-item-flag
{
  margin: -20px 0 0 0;
  line-height: 20px;
  height: 20px;
  display: block;
  text-transform: uppercase;
}

JavaScript

// 450 x 300

var w = 450,
		h = 300;
    

    
console.log('normal', (h/w) * 100 );
console.log('flag', ((h+20)/w) * 100 );