在屏幕的一部分内调整照片大小

Fitting & Resizing Photo within Portion of Screen

本文关键字：照片 调整 屏幕 一部分      更新时间：2023-09-26

我是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>


.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>

您可以将

#image 高度设置为 height:100vh，这意味着您希望它拉伸到视口高度的 100%。您可以在此处找到更多信息。

以下是新代码：

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>

要使页面响应并解决您的问题，您可以将导航宽度设置为 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");
}
相关文章：