JSFiddle - React, Tailwind, and code Playground

HTML

<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
    <div class="clip">
            <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">      
       <div>
</li>

CSS

li {
    width: 190px;
    border: 1px solid black;
    list-style: none;
}

li img{
    width: 100%;
}

.clip {
    overflow: hidden;
}

JavaScript

$(function() {
    
    $('.clip img').load(function() {
        $(this).parent('.clip').css({ width: $(this).width(), height: $(this).height() }); 
$(this).unbind('load');                
    });            
});