停止img元素html的溢出

<img src="image.jpg" style="object-fit: contain;">

<div style="width: 200px; height: 200px; overflow: hidden;">
    <img src="image.jpg">
</div>

<div id="container" style="width: 200px; height: 200px;">
    <img id="image" src="image.jpg">
</div>

<script>
    var container = document.getElementById('container');
    var image = document.getElementById('image');
    
    if (image.width > container.offsetWidth || image.height > container.offsetHeight) {
        var containerAspectRatio = container.offsetWidth / container.offsetHeight;
        var imageAspectRatio = image.width / image.height;
        
        if (containerAspectRatio > imageAspectRatio) {
            image.style.width = '100%';
            image.style.height = 'auto';
        } else {
            image.style.width = 'auto';
            image.style.height = '100%';
        }
    }
</script>