Question

我的基本目标是在其中加载带有图像（由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>

我的目标是成功的，只是图片会在其他所有内容加载后加载，这会在Google的页面速度洞察中触发“优先显示可见内容”问题，因为一旦图片加载，外框就需要调整大小。

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

如果您希望在其中看到“优先考虑可见内容问题”，请参阅此网址。

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

这是我的网站，根据图片的大小，框的大小。

我觉得我唯一的解决方案是让黑盒高度达到最大高度，这样无论尺寸大小，照片都能很好地贴合在里面，但是这种实现的问题是屏幕宽度非常小的设备上的用户会看到图片尺寸合适，但是他们会看到一堆黑色的空间，他们必须滚动才能找到我不想要的文字。

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

Answer 1

为什么不给DIV高度并将图像放在BG下，就像它下面没有空白区域一样，我会想象像带有边框的#mybox：10px solid＃000;然后将图像作为#mybox的背景，并给它一个背景大小：封面;如果外观不合适，你也可以使用媒体查询修改包装盒的高度。

在响应框中制作响应式图像，而不会在页面速度中导致可见内容问题

1 个答案: