JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<html>
<head>
    <title>responsive images</title>
</head>
    
<body>

<img src="http://images1.wikia.nocookie.net/__cb20110813194421/looneytunesbackinaction/images/4/42/DaffyDuck.jpg" width="" height="" class="responsiveImageFrame" alt="daffy duck">

</body>
</html>

CSS

body { background: #dcdcdc; margin:10px;}
.responsiveImageFrame { 
    max-width: 100%;
    min-width: 320px; /*min width mobile.. optional*/
    width: auto\9;
    height: auto;
    background: #fff;
    vertical-align: middle;
    border: 0;
    box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -moz-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -webkit-box-shadow: 1px 1px 2px rgba(40, 40, 40, 0.8);
    -ms-interpolation-mode:bicubic;
}

JavaScript

//responsive image