开发者社区> 问答> 正文

设计稿的banner和网页中显示的矛盾?

这个变态的设计稿长为1920px,内容区是1000px,
我把这张banner切下来width为1920px,height:300px.
如果我把这张banner直接放到网页上,肯定会拉伸。
但是要求是banner的内容(也就是中间的1000px,粽子和文字的距离。)区域要正好和网页的内容
区1000px在一条线上,不知该怎么做?能正好不拉伸,还和内容区平齐,不知该怎么做?

我的页面结构 ul>li>a>img
screenshot

展开
收起
杨冬芳 2016-06-16 17:25:11 1966 0
1 条回答
写回答
取消 提交回答
  • 码农|Coder| Pythonista

    可以考虑使用背景图片, 加上background-position: center center;

    <!DOCTYPE HTML>
    <html>
        <head>
            <title>背景居中显示</title>
            <meta charset="utf-8" />
            <style>
                .container{
                    width: 100%;
                    height: 300px;
                    background: url('test.png') no-repeat center center;
                }
            </style>
        </head>
        <body>
            <div class="container"> </div>
        </body>
    </html>
    2019-07-17 19:41:31
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
营销设计场景下的图像和文字生成 立即下载
如何高效的制作主机次时代游戏 立即下载
复杂环境下的视觉同时定位与地图构建 立即下载