JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<ul>
  <li><div><img src="https://placeimg.com/100/200/nature" alt=""></div></li>
  <li><div><img src="https://placeimg.com/200/100/nature" alt=""></div></li>
  <li><div><img src="https://placeimg.com/400/100/nature" alt=""></div>div></li>
  <li><div><img src="https://placeimg.com/200/400/nature" alt=""></div>div></li>
</ul>

CSS

img {
  /* width: 800px; */
}

ul {
  overflow: hidden;
}
li {
  float: left;
  margin: 10px;
  width: 300px;
  height: 300px;
  /* padding: 1rem; */
}
li > div {
  position: relative;
  
  
  background: #000;
  /* padding: 1rem; */
}
li > div:before {
  content: '';
  padding-top: 100%;
  display: block;
}
li img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  bottom: 0;
  right: 0;
}