花式盒子適合容器的圖像

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就可以做任何事情。