JSFiddle - React, Tailwind, and code Playground

by Serge Karchmit

HTML

<ul id = "photos">
		<li onclick="preview('pic1')" id = "pic1">
			<img src = "https://38.media.tumblr.com/d88beaf3fe2964af04e8b3d57aa32e97/tumblr_n9gnc0n0Gu1tgkx81o1_1280.jpg">
		</li>
		<li>
			<img src = "https://38.media.tumblr.com/d88beaf3fe2964af04e8b3d57aa32e97/tumblr_n9gnc0n0Gu1tgkx81o1_1280.jpg">
		</li>
            </ul>
            
            <button onclick = "resize()" id = "btn">Press ME</button>

CSS

#photos{
	width: 500px;
	display: block;
	border: 2px solid red;
	background-color: yellow;
}
#photos li{
	float: left;
	width: 18vw;
	height: 18vw;
	margin: 1.03vw;
	overflow: hidden;
	background: black;
}
#photos li > img{
	position: relative;
	bottom: 10px;
	/*-webkit-background-size: cover center center; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover center center;*/
	width: 140%;
}

JavaScript

function resize(){
    document.getElementById('photos').width = "100px !important";
}