花式盒子适合容器的图像

Question

我从这里尝试了不同的答案，但结果仍然相同......我对此感到困惑，我实际上得到了我想要的结果。 但是我在fancybox 中遇到了问题，我想将我的图像放入fancybox 的容器中。 （将上传照片）尚未点击时的图像/在fancybox中时的图像

另一个示例，尚未单击时的图像/ fancybox 中的图像我正在使用此代码

PS：这是在论坛里，所以图片将是随机的..

$("#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

使用 CSS 使您的图像宽度为 100% 或设置object-fit: cover; （ https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit ）。 基本上，只要没有fancybox就可以做任何事情。