Css 在响应框中生成响应图像，而不会导致pagespeed中出现可见内容问题_Css_Image_Size_Responsive

Css 在响应框中生成响应图像，而不会导致pagespeed中出现可见内容问题

css image

Css 在响应框中生成响应图像，而不会导致pagespeed中出现可见内容问题,css,image,size,responsive,Css,Image,Size,Responsive,我的基本目标是创建一个黑匣子，里面加载一个图像（由javascript编写）。我希望图像和盒子都能响应（在所有分辨率下都能适当缩放），但我希望图像的最大宽度为一定的大小。到目前为止，我的代码如下： <html> <head> <style> #mybox{ background: #000; padding: 10px; } #picturesettings

我的基本目标是创建一个黑匣子，里面加载一个图像（由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>


#我的盒子{
背景：#000；
填充：10px；
}
#图片设置{
最大宽度：365px；
宽度：100%；
高度：自动；
}
var mypicture=document.getElementById（'mypicture'）；
var newpicture=document.createElement（'IMG'）；
newpicture.id=“picturesettings”；
newpicture.alt=“新建图片”；
newpicture.src=“/path/to/image.jpg”；
mypicture.appendChild（newpicture）；

我的目标是成功的，除了在加载所有内容之后加载图片，这将在google的PageSpeed insights中触发“优先可见内容”问题，因为一旦加载图片，外部框将需要调整大小

是否有一种方式可以加载图片，从而使外部框的初始尺寸只需进行一次而不是两次

如果您想看到其中的“优先可见内容问题”，请查看此URL

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

我觉得我唯一的解决办法是将黑匣子的高度设为最大高度，这样照片无论大小都能很好地放在里面，但这种实现的问题是，屏幕宽度非常小的设备上的用户会看到大小合适的图片，但他们会看到一堆黑色空间，他们必须滚动浏览才能找到文本，这也是我不想要的

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

为什么不给DIV加一个高度，然后把图像放在背景上，这样下面就不会有空白，我会想象像“带边框的mybox:10px solid”000；然后将图像作为#mybox的背景，并给它一个背景大小：cover；此外，您还可以通过媒体查询修改框的高度，以查看其他屏幕尺寸（如果不美观）。

您可以通过将图像插入SVG中，将SVG标记的

宽度&高度及其viewbox
属性设置为图像的分辨率（实际大小），轻松实现这一点。这将在不使用JavaScript的情况下按比例扩展。如果你对这项技术感兴趣，我可以发布一个答案来回应你的评论。我不确定CSS3功能是否适用于老式手机。虽然媒体查询不同的盒子高度是一个好主意，但我恐怕需要数百万行这样的线来适应每个高度。我习惯于固定高度，高度取决于媒体查询。如果智能手机不支持媒体查询，请有人投诉。