花式盒子适合容器的图像

Question

I tried different answers from here but the results is still the same.. I am getting confused about this, I actually got the result i want. But I'm having problem in fancybox, i would like to fit my image to the container of the fancybox. ( will upload photo) image when not clicked yet / image when inside fancybox

Another sample, image when not yet clicked / image inside fancybox I am using this code

PS: this is in a forum, so images will be random..

$("#post_message_{vb:raw post.postid}").css({'transform': 'rotate(+90deg) translate(-56%)','transform-origin': 'bottom left','white-space': 'nowrap','max-height': '650px'});

$("#post_message_{vb:raw post.postid} ").css({'padding': '0% 0px 24% 0px','height': '0','display': 'table'});

$(document).ready(function() {
    $("#post_message_{vb:raw post.postid}").fancybox({                   
        beforeShow: function () {
            $(".fancybox-inner").css({
                "overflow-x": 'hidden'
            });
        },
        'autoSize': false,
        'fitToView': false,
        'autoResize': false,
        'autoCenter': false
    });               
});     

Answer 1

Use CSS to make your image 100% width or maybe set object-fit: cover; ( https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit ). Basically, jut do everything you would do without fancybox.