Question

我的流体设计存在问题。这是我的测试网站 - www.lync-star.com

您会注意到，当缩小浏览器窗口时，所有图像都会正确缩放。

然而，当屏幕变小（大约360 x 640的手机尺寸）时，与文字和标题（例如顶部图像）相比，图像非常小

我该如何解决这个问题？我是否需要使用媒体查询来加载另一个更大的图像？

我希望上述内容有意义吗？

最佳， P

Answer 1

这是图像的比例。如果你的图像是~800x270且max-width为100%，那么随着图像宽度的缩小，它将保留这些比例。您需要使用媒体查询来缩小文本大小，因为页面变小，或者您需要加载具有不同proprortions的图像。

无论如何，这就是你要做的事情

media(min-width: 768px) // Obviously, change 768 to whatever you desire
{
    // Any rules applied inside of this media(){} block will be 
    // applied on browser windows wider than 767px
    div#header_img 
    {
        background-image: url('path/to/img.png'); // Normal header image
    }
}

media(max-width: 767px)
{
    div#header_img
    {
        background-image: url('path/to/img.png'); // Alternative image, perhaps taller?
    }
}

同样的原则也可以应用于文本大小。阅读有关媒体查询here和here

的内容

您也可以使用background-size并尝试制作图片，使图片保持相同的尺寸，但div缩小的背景可以看得更少。< / p>

流体设计图像无法正确缩放

1 个答案: