JSFiddle - React, Tailwind, and code Playground

by Hugo Carneiro

HTML

<span>
  <img src="https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</span>

<div class="container">
  <span>
    <img src="https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
  </span>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

span {
  display: inline-block !important;
  width: auto;
  min-width: auto;
  max-width: 100%;
}

span img {
  height: auto;
  min-height: auto;
  max-height: none;
  flex-shrink: 0;
}

.container {
  display: flex;
}