Подбор и изменение размера фото в части экрана

Я новичок в HTML/CSS, и сейчас я работаю над проектом, где у меня есть вертикальное меню. Когда я пытаюсь подогнать свой полноразмерный фоновый рисунок, он расширяет ширину экрана, поэтому мне нужно прокрутить его. Мне нужно покрыть оставшуюся часть белого пространства на странице, но без этого.Подбор и изменение размера фото в части экрана

Вот мой код:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <title>Ryan Gross: Web Dev. </title> 
     <style type="text/css"> 
      .container { 
      } 
      body { 
       margin:0; 
       padding:0; 
       font-family:"Verdana"; 
       overflow:auto; 
      } 
      #menu_background { 
       float:left; 
       background-color:#272727; 
       width:200px; 
       height:100%; 
       position:fixed; 
      } 
      #side_menu { 
       list-style-type:none; 
       font-size:1.3em; 
       width:200px; 
       padding:0px; 
       margin-top:260px; 
       font-family:"Verdana"; 
       text-align:center; 
      } 
      #side_menu li a { 
       display:block; 
       text-decoration:none; 
       color:#E6E6E6; 
       padding:8px 0px 8px 0px; 
      } 
      #side_menu li a:hover { 
       background-color:#585858; 
      } 
      #contact_info { 
       float:left; 
       margin:120px 0px 0px 20px; 
       padding:0; 
       color:#E6E6E6; 
       list-style-type:none; 
       font-size:.9em; 
      } 
      #contact_info li { 
       padding:2px 0px 2px 0px; 
      } 
      #image { 
       float:left; 
       width:100%; 
       height:100%; 
       background-size:cover; 
       background-image:url("example.jpg"); 
      } 
     </style> 
    </head> 
    <body> 
    <div class="container"> 
     <div id="menu_background"> 
      <ul id="side_menu"> 
       <li> <a href="about.html"> About </a></li> 
       <li> <a href="skills.html"> Skills </a> </li> 
       <li> <a href="projects.html"> Projects </a> </li> 
       <li> <a href="resume.html"> Resume </a> </li> 
      </ul> 
     </div> 
     <div id="image"></div> 
    </div> 
    </body> 
</html>

источник

2016-02-01 Ryan Gross

Это расширение *** за пределами *** ширины экрана? – DeveloperACE

Вы можете установить высоту #image к height:100vh означает, что вы хотите, чтобы растянуть до 100% от высоты окна просмотра. Вы можете найти больше информации here.

Вот новый код:

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: auto; 
 
    font-family: Verdana 
 
} 
 

 
#side_menu { 
 
    padding: 0; 
 
    list-style-type: none 
 
} 
 

 
#menu_background { 
 
    float: left; 
 
    background-color: #272727; 
 
    width: 200px; 
 
    height: 100%; 
 
    position: fixed 
 
} 
 

 
#side_menu { 
 
    font-size: 1.3em; 
 
    width: 200px; 
 
    margin-top: 260px; 
 
    text-align: center; 
 
} 
 

 
#side_menu li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #E6E6E6; 
 
    padding: 8px 0; 
 
} 
 

 
#side_menu li a:hover { 
 
    background-color: #585858 
 
} 
 

 
#image { 
 
    float: left; 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: url(http://lorempixel.com/1500/1500) no-repeat center center; 
 
    background-size:cover; 
 
}

<div class="container"> 
 

 

 
    <div id="menu_background"> 
 

 
    <ul id="side_menu"> 
 
     <li><a href="about.html">About</a></li> 
 
     <li><a href="skills.html">Skills</a></li> 
 
     <li><a href="projects.html">Projects</a></li> 
 
     <li><a href="resume.html">Resume</a></li> 
 
    </ul> 
 

 
    </div> 
 

 
    <div id="image"></div> 
 

 
</div>

источник

2016-02-01 02:13:52 fbid

.container{ 
 
    width: 400px; 
 
    height: 300px; 
 
    overflow: auto; 
 
} 
 
#image{ 
 
background: url('http://www.natureasia.com/common/img/splash/thailand.jpg'); 
 
}

<div class="container"> 
 
    <div id="image"></div> 
 
</div>

источник

2016-02-01 02:18:04

Чтобы сделать страницу отзывчивым и устранить проблему, вы можете установить ширину вашего навигацию до 20% и ширину изображения до 80%. Это позволит двум плавать рядом друг с другом. Единственный трюк в том, что вы захотите установить точки останова, если используете меньшие экраны. Вот новый код.

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 
<body> 
    <div class="container"> 
     <div id="menu_background"> 
      <ul id="side_menu"> 
       <li> <a href="about.html"> About </a></li> 
       <li> <a href="skills.html"> Skills </a> </li> 
       <li> <a href="projects.html"> Projects </a> </li> 
       <li> <a href="resume.html"> Resume </a> </li> 
      </ul> 
     </div> 
     <div id="image"> 
     </div> 
    </div> 
</body> 
</html> 

body { 
margin:0; 
padding:0; 
font-family:"Verdana"; 
overflow:auto; 
} 

#menu_background { 
float:left; 
background-color:#272727; 
width:20%; 
height:100%; 
position:fixed; 
} 

#side_menu { 
list-style-type:none; 
font-size:1.3em; 
width:200px; 
padding:0px; 
margin-top:260px; 
font-family:"Verdana"; 
text-align:center; 
} 


#side_menu li a { 
display:block; 
text-decoration:none; 
color:#E6E6E6; 
padding:8px 0px 8px 0px; 

} 

#side_menu li a:hover { 
background-color:#585858; 
} 


#contact_info { 
float:left; 
margin:120px 0px 0px 20px; 
padding:0; 
color:#E6E6E6; 
list-style-type:none; 
font-size:.9em; 
} 

#contact_info li { 
padding:2px 0px 2px 0px; 
} 

#image { 
float:right; 
width:80%; 
height:100%; 
background-size:cover; 
background-image:url("example.jpg"); 
}

источник

2016-02-01 02:34:34 Jacob

Что вы понимаете под точки перерыва? –

Кроме того, почему он плавает: справа, а не слева? –

Подбор и изменение размера фото в части экрана

ответ

Смежные вопросы