CSS: Fit image by its smaller side
css, html
Solution
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
turns out there's another way to do this.
<img style='height: 100%, width: 100%, object-fit: cover'/>
will do the work. It's CSS3 stuff.
Fiddle: http://jsfiddle.net/mbHB4/3/
Problem
I'm trying to create an icon container that will display any image size (long or wide). The image should fit the container with its smaller side, while extras will be outside the container. Before applying overflow: hidden it should work like this. Its seems fairly easy to do with js, but I'm curious to find a css solution. ``` <div class="container"> <img src="test.png"/> </div> .container { width: 30px; height: 30px; } .container img { position: relative; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } ```