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

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

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

图片描述

前端 html css

阅读 3.3k

2 个回答

daizhan

✓ 已被采纳

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

html<!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>