Question

我一直试图将这些图像放置几个小时。我一直遇到问题，现在我的图像被切断了。我确信我的代码中有很多东西没有多大意义 - 我是新手。

你可以在codepen上看到它:(正如你所看到的，左边的图像被推到它的容器外面的左边太远了） http://codepen.io/anon/pen/EPVXBK

由于某种原因，我在浏览器中的图像之间占据了很大的空间： https://www.dropbox.com/s/uts7xbmulpcrmqd/page1.png?dl=0

HTML：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="final.css">
</head>

<body>
    <header id="navbar">
    2222222222222222222222222222
    </header>
    <div id="all">

    <div id="sideNav">
    <ul>
    <li><a class="menu" href="#"><a></li><hr>
    <li><a class="menu" href="#"> Account<a></li><hr>
    <li><a class="menu" href="#"> Live Events <a></li><hr>
    <li><a class="menu" href="#"> Football<a></li><hr>
    <li><a class="menu" href="#"> Baseball<a></li><hr>
    <li><a class="menu" href="#"> Soccer<a></li><hr>
    <li><a class="menu" href="#"> Basketball<a></li><hr>
    <li><a class="menu" href="#"> Hockey<a></li><hr>
    <li><a class="menu" href="#"> MMA<a></li><hr>
    <li><a class="menu" href="#"> eSports<a></li><hr>
    <li><a class="menu" href="#"> Tennis<a></li><hr>
    <li><a class="menu" href="#"> Cricket<a></li><hr>
    <li><a class="menu" href="#"> Golf<a></li><hr>
    <li><a class="menu" href="#"> Badminton<a></li><hr>
    <li><a class="menu" href="#"> Handball<a></li><hr>
    <li><a class="menu" href="#"> Rugby<a></li><hr>
    <li><a class="menu" href="#"> Snooker<a></li><hr>
    <li><a class="menu" href="#"> Table Tennis<a></li><hr>
    <li><a class="menu" href="#"> Volleyball<a></li><hr>
    </ul>
    </div>

    <section id="container">

    <section id="left">
    <div id="sec1">kdjskdkasd</div>
    </section>
    <section id="right">
    <div id="sec2">32939282</div>
    </section>
    <div id="sec3">dsjkjdsakjdkajads</div>

    </section>

    </div>
</body>

</html>

CSS：

header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #00a087;
  }

/* Sidebar */

#sideNav{
  width: 130px;
  float: left;
  display: inline;
  margin-top:42px;
  padding: 0;
  max-height:80em;
  background-color:#00a087;

}
.menu {
    line-height:50px; 
    border-bottom: 1px solid black;
    color:#fff;
    border:1px dotted black;
    display:block;}

ul{ list-style-type: none; margin:0; padding:0.5em;}
a{text-decoration: none;}

a:hover{
    background-color:#fff;}

/* holds sidebar and content */
#all{
    position:fixed;
    left:0;
    right:0;
    max-height:128em;
    }

/* holds all center content */

#container{
    margin-top: 3em;
    margin-right: 8em;
    margin-left: 8em;
    max-height: 64em;
    display:flex;
}

/* Left and Right columns*/

#right{
    border:1px dotted red;
    float: right;
    width: 51em;
}
#left{
    float: left;
  width: 51em;
}

/* sec1 is left container
   sec2 is right container */

#sec1{
    background: url('https://www.dropbox.com/s/yq2v35frxg5cywm/football2.jpg?raw=1') no-repeat left fixed;
    text-align:center;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    min-height: 62em;
      width:100%;
  float:left;
}

#sec2{
    background: url('https://www.dropbox.com/s/yq2v35frxg5cywm/football2.jpg?raw=1') no-repeat right fixed;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    -o-background-size: auto;
    background-size: auto;
    text-align:center;
      min-height:62em;
  float:right;
    width: 100%;
}

Answer 1

喜欢那个？：

http://codepen.io/anon/pen/LGpjpL

忽略left规则中的right和background并设置background-size: cover;

Answer 2

所以你想要显示完整尺寸的图像并向右或向左对齐？然后你应该使用：

background-size: contain;
background-position: left; //or right

Answer 3

你可以快速浏览一下你想要实现的目标（使用两个不同的图像），这样可以给出更明确的答案吗？

背景图像被切断（两个图像并排）

3 个答案: