Question

我获得了一个带有标题的模型设计，该标题具有弯曲图像（类似于http://www.smartwebby.com/images/tutorials/fireworks/website_design_fireworks/pic_header_footer.gif或http://theme-fusion.com/wp-content/uploads/2014/10/curved-header.png）。在顶部。问题是它必须是流动的＆amp;响应。在开始制作之前，我喜欢从概念上解决问题。有人可以帮助我如何使这个响应。如果我只是100％宽度，它会在某些点上变得非常扭曲。有什么想法吗？

Answer 1

正如您猜测的那样，您可以使用宽度：100％，然后使用媒体查询将不同的图像投放到不同的屏幕尺寸，例如：

header {
    width: 100%;
}

@media only screen and (min-width : 480px) {
    header {
        background-image: url("/img/image-xs.png");
    }
}

@media only screen and (min-width : 768px) {
    header {
        background-image: url("/img/image-sm.png");
    }
}

@media only screen and (min-width : 992px) {
    header {
        background-image: url("/img/image-md.png");
    }
}

@media only screen and (min-width : 1200px) {
    header {
        background-image: url("/img/image-lg.png");
    }
}

多种图像选择可让您对抗您害怕的像素化。通过在不同的断点处提供最适合屏幕的图像，您将保持各种尺寸的图像质量相对较好。

如何保持此标题响应？

1 个答案: