Responsive design 在响应站点上对长水平图像进行居中（带链接）

谢谢你抽出时间。我是一个试图进入编码领域的设计师，但这太令人沮丧了

我试图创建一个响应网页，所以我创建了一个非常长的图形，中间的主要信息。我正在尝试将此图形居中，以便无论浏览器窗口有多大/多宽，它仍然可以显示图形的中间部分

    <div class= "container">
    <div id="main">
    <img src="maingreenlong.png"/>
    </div>
    </div>

   #main {}

   .container
   {
  position: relative;
  width: 100%;
  overflow: hidden;
  }

#主{}
容器
{
位置：相对位置；
宽度：100%；
溢出：隐藏；
}

我有一个包装了div.main的div.container，因为我在另一个问题上看到了它，但它不起作用：(

这可能没有任何意义，请访问我的网站（向右滚动），你将能够看到我正试图做什么。我创建的长图像只会使我的网站非常长…也许这是另一个问题叹息哈哈

---

提前感谢大家！

此网站完全没有响应。您可能想看一些教程，了解：

• 流体设计
• 元视口标记（用于触摸设备）
• html5
• 响应性设计（移动优先、桌面优先以及原因）
• 如果您计划支持IE8，请使用respond.js
• 基本jquery
• 定位、浮动、显示和所有css基础
• 响应图像
• 背景大小选项
• 盒子尺寸
• 视网膜图像
• 可达性

而且这个名单还在继续

这是移动优先CSS。您将共享的全局样式放置在媒体查询之外，并将较大视口中的样式放置在最小宽度中。您可以根据您的设计选择最小宽度，使其具有流动性和中间尺寸（因为设备的尺寸很多，所以看起来会很好）

如果你打算使用一个汉堡（三行），或者尽你所能发布一个新的SO问题，你需要学习如何切换导航

演示： CSS

body,
html {
    margin: 0;
    padding: 0;
    background: #fff;
    font: 1em/1.8 sans-serif;
}
*,
*:before,
*:after {
    box-sizing: border-box
}
.featurette {
    width: 100%;
    clear: both;
    height: 0;
    padding-top: 40%;
    background: url(http://www.jhydesigns.com/maingreenlong.png);
    background-size: cover;
    background-position: 50% 50%;
}
.header {
    text-align: center
}
.header .nav ul {
    margin: 0;
    padding: 3% 0 0 0;
    position: relative;
    list-style: none;
    clear: both;
}
.header .nav a {
    text-decoration: none;
    padding: 10px;
    color: #000;
    display: block;
}
.header {
    padding: 3% 5% 0;
    position: relative;
}
.header img {
    max-width: 150px;
    width: 100%;
    display: block;
    margin: 0 auto 5%;
}
@media (min-width:400px) { 
    .header .logo {
        float: left
    }
    .header .social {
        float: right
    }
    .header .nav li {
        display: inline-block
    }
    .header img {
        margin: 0
    }
}
@media (min-width:600px) { 
    .header {
        display: table;
        width: 100%;
        padding: 3% 5%;
    }
    .header .logo,
    .header .social {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
        float: none;
    }
    .header .social {
        text-align: right
    }
    .header .nav {
        position: absolute;
        bottom: -50px;
        left: 5%;
    }
    .header .nav a {
        color: #fff;
        display: inline-block;
        padding: 5px 10px;
    }
    .header .nav ul {
        left: -10px;
        padding: 0;
    }
    .header .nav li {
        display: inline-block
    }
    .featurette {
        padding-top: 30%
    }
}
.footer {
    clear: both;
    background: #000;
    color: #ddd;
    padding: 3% 5%;
    text-align: center;
}
@media (min-width:400px) { 
    .footer {
        text-align: right
    }
  
}

@media (min-width:1000px) { 
    .featurette {
        padding-top: 20%
    }
}  

HTML

  <header class="header">
     <a href="#" class="logo"><img src="http://www.jhydesigns.com/Logo.png" alt="" /></a>
     <div class="social">
        X X stuff
     </div>
     <nav class="nav">
        <ul role="navigation" role="navigation">
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
           <li><a href="#">Link</a></li>
        </ul>
     </nav>
  </header>
  <div class="featurette" ><!-- background image --></div>
  <footer class="footer">footer</footer>

X X东西







页脚

将你的css、html和图像以小提琴的形式添加到你的问题中。否则你可能得不到答案。@Christina谢谢。可以！