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

Question

我的流畅设计有问题。这是我的测试站点 - www.lync-star.com

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

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

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

我希望以上内容有意义？

最好， p

Answer 1

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

无论如何，这就是你的做法

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 它是缩小的背景，所以可见的更少。