JSFiddle - React, Tailwind, and code Playground

responsive images

by CBroe

HTML

<p>Lorem ipsum</p>
<div>
    <img src="http://lorempixel.com/400/400/city/Responsive"><!--
    --><img src="http://lorempixel.com/400/400/city/Images">
        </div>
<p>Lorem ipsum</p>

CSS

p { padding:6%; background:#fcc; }
div { background:green; text-align:center; }
div img { display:inline-block; width:50%; max-width:400px; min-width:200px; padding:6% 3% 6% 6%; box-sizing:border-box; }
div img + img { padding:6% 6% 6% 3%; }
@media (max-width: 600px) {
  div img { padding:6% 6% 3% 6%; }
  div img + img { padding:3% 6% 6% 6%; }    
}