在响应框中制作响应图像而不会导致 pagespeed 中的可见内容问题

Question

我的基本 objective 是有一个黑盒子，里面装有一张图片（由 javascript 准备）。我希望图像和框都能响应（在所有分辨率下适当缩放），但我希望图像的最大宽度为特定大小。到目前为止，这是我的代码：

<html>
<head>
    <style>
        #mybox{
            background: #000;
            padding: 10px;
        }
        #picturesettings{
            max-width: 365px;
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="mybox">
        <div id="mypicture">
        </div>
    </div>
    <script>
        var mypicture=document.getElementById('mypicture');
        var newpicture=document.createElement('IMG');
        newpicture.id="picturesettings";
        newpicture.alt="new picture";
        newpicture.src="/path/to/image.jpg";
        mypicture.appendChild(newpicture);
    </script>
</body>
</html>

我的 objective 是成功的，除了图片在其他所有内容加载之后加载，这将在 google 的页面速度洞察中触发 "prioritize visible content" 问题，因为外框需要图片加载后调整大小。

有没有一种方法可以加载图片，这样外盒的初始尺寸只需要做一次而不是两次？

如果您想查看其中的 "prioritize visible content issue"，请参阅此 URL。

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fnew.clubcatcher.com%2Fm%2Fpictures%2Fstudio-entertainment-theatre%2F2016may06%2F1

这是我的网站，其中框的大小取决于图像的大小。

我觉得我唯一的解决方案是将黑框高度设置为最大高度，这样无论照片大小如何，照片都能很好地放入其中，但该实现的问题是屏幕宽度非常小的设备上的用户会以合适的尺寸查看图片，但他们会看到一堆黑色 space 他们必须滚动才能找到我不想要的文本。

有什么办法可以解决这个问题吗？

Answer 1

为什么不给 DIV 一个高度并将图像作为 BG，这样它下面就没有白色 space，我会想象像带边框的#mybox： 10px 纯色#000；然后将图像作为#mybox 的背景并给它一个背景大小：封面；如果其他屏幕尺寸看起来不太好，您还可以使用媒体查询修改框的高度。

在响应框中制作响应图像而不会导致 pagespeed 中的可见内容问题

Making responsive image in responsive box without causing visible content issue in pagespeed

css

size

image

responsive