有谁可以帮助我为什么主要图像，页面的第一张图像，不会延伸到整个页面。它只显示在网络的中心。我试图让第一张图像成为宽度与下图相同。
此外，我试图将投资组合部分中的所有图像均衡为具有相同的高度，但这个图像也没有按照我的预期工作。我按照其他资源的教程。但我无法弄清楚出了什么问题......
感谢任何帮助，我真的很感激。万分感谢~~！
html {
box-sizing: border-box;
}
body{
margin: 0;
}
/*Logo style*/
.logo-section .Logo {
width: 150px;
height: 100px;
}
img {
border-radius: 2px;
width: 100%;
height: auto;
vertical-align: middle;
}
.img-responsive {
max-width: 100%;
heigh:auto;
}
/*Main pic style*/
.grid{
display: flex;
}
*, *:before, *:after {
box-sizing: border-box;
}
.main-container{
margin: 0 auto;
padding: 5%;
width: 75%;
}
/**When viewpoint is below 600px Main img is gone**/
@media screen and (max-width: 600px)
.Row{
display: none;
}
/*Project photoes*/
.img1 { flex: 1.2944; }
.img2 { flex: 1.7777778; }
.img3 { flex: 1.59817; }
.img4 { flex: 1.59817; }
.img5 { flex: 1.59817; }
.img6 { flex: 1.59817; }
.flex-item{
margin: 1rem;
}
.photo-grid {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
@media screen and (min-width: 1000px) {
.flex-item {
width: 30%;
}
}
.img-center {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.input_inf {
padding: 8px;
display: block;
border: none;
border: 1px solid #ccc!important;
width: 100%;
}
.input-padding {
padding-top: 16px!important;
padding-bottom: 16px!important;
}
.love{
color:red;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Montserrat", sans-serif
}
.text-color{
color:#757575!important}
.bar-color, .w3-hover-black:hover {
color: #fff!important;
background-color: #000!important;
}
.animate-right{
animation: toright 0.5s;
}
@keyframes toright {
0% {
right: -200px;
opacity: 0;
}
100% {
right: 0;
opacity: 1;
}
}
nav{
display:block;
}
.sidebar {
height: 100%;
background-color: #fff;
position: fixed!important;
display:none;
padding-top:150px;
z-index:2;
right:0;
}
.bar-block .bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: center;
border: none;
outline: none;
white-space: normal;
float: none;
}
html, body {
font-size: 18px;
line-height: 1.2;
}
.Project{
text-align:left;
}
.icon-size {
font-size: 35px!important;
}
.icon-position{
position: fixed;
width: 100%;
}
.button {
border: 10px;
display: inline-block;
padding: 10px 16px;
vertical-align: middle;
text-decoration: none;
background-color: inherit;
width:auto;
right:0;
}
.center-position{
text-align: center!important;
}
h2 {
font-size: 30px;
}
.footer {
color: #747704;
font-size: 24px;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 500;
line-height: 1.2;
text-align: center!important;
}
hr {
border: 10;
border-top: 1px solid #eee;
margin: 20px 0;
box-sizing: content-box;
overflow: visible;
display: block;
}
.large-font {
font-size: 48px!important;
}
.close-button-position {
position: absolute;
right: 0;
top: 0;
}
.MineName {
font-size: 64px!important;
}
h3 {
font-size: 24px;
}
.Contact-Section{
margin-bottom:64px;
}
.pull{
text-align: right;
}<!DOCTYPE html>
<html>
<title>Portfolio</title>
<!-- Meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Boyan Liu - Front End Developer">
<meta name="keywords" content="portfolio, Boyan Liu, HTML, CSS,JavaScript, front-end">
<meta name="author" content="Boyan Liu">
<!--Font Icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Font-->
<!--CSS-->
<body>
<div class="header-container">
<div class="sidebar-item">
<!-- Hidden Sidebar (reveals when clicked on menu icon)-->
<nav class="sidebar bar-color animate-right icon-size"id="mySidebar">
<a href="javascript:void(0)" onclick="closeNav()" class="button bar-color large-font close-button-position" style="padding:0 12px;">
<i class="fa fa-remove"></i>
</a>
<div class="bar-block center">
<a href="#" class="bar-item button text-color " onclick="closeNav()">Home</a>
<a href="#Project" class="bar-item button text-color " onclick="closeNav()">Project</a>
<a href="#about" class="bar-item button text-color " onclick="closeNav()">About</a>
<a href="#contact" class="bar-item button text-color " onclick="closeNav()">Contact</a>
</div>
</nav>
<!-- Menu icon to open sidebar -->
<span class="button icon-position icon-size text-color " onclick="openNav()"><i class="fa fa-bars"></i></span>
</div>
<!--Logo-section-->
<div class="Logo-container">
<div class="logo-section">
<img class="Logo" src="https://cdn-images-1.medium.com/max/1600/1*M91VPyBBkZ1sFT4Yv43LWQ.png"; alt="Udacity Logo">
</div>
</div>
<!--End of header section-->
</div>
<!-- Main Content -->
<div class="Title-container">
<!-- Main Title -->
<div class="Main_Title">
<header class="center-position" id="home">
<h1 class="MineName "><b>Boyan Liu</b></h1>
<p>Front-End Ninja.</p>
<button class="button">
<i class="fa fa-download"></i> Download Resume</button>
</header>
</div>
<!--End of title Container-->
</div>
<!--Main Picture-->
<div class="main-container">
<div class="grid">
<div class="Row">
<img src="http://www.wallpaperup.com/uploads/wallpapers/2012/12/22/26202/big_thumb_efa8696da34157aaf43d587d1f6b8299.jpg"alt="main image">
</div>
</div>
</div>
<!-- Portfolio Section -->
<h2 class="Project text-color">Udacity Project</h2>
<hr>
<div class="portfolio" id="Project">
<!-- Future Project Part-->
<div class="photo-grid-container">
<div class='photo-grid'>
<div class="flex-item">
<img class="img-responsive img-center img1" src="https://raw.githubusercontent.com/Agent5/udacity-frontend-project1/master/images/p1.jpg"; alt="Build a portfolio" >
<h3 class="footer">Boyan WIKI</h3>
</div>
<div class="flex-item">
<img class="img-responsive img-center img2" src="https://i.ytimg.com/vi/33F1s0iDlEk/maxresdefault.jpg"; alt="Interactive resume">
<h3 class="footer">Interactive resume</h3>
</div>
<div class="flex-item">
<img class="img-responsive img-center img3" src="http://jshanks24.github.io/Udacity-Portfolio-Site/images/arcade-game_small.jpg"; alt="Classic arcade game clone" >
<h3 class="footer">Classic arcade game clone</h3>
</div>
<div class="flex-item">
<img class="img-responsive img-center img4" src="http://jshanks24.github.io/Udacity-Portfolio-Site/images/website-optimization_pizza_small.jpg"; alt="Website Optimization" >
<h3 class="footer">Website Optimization</h3>
</div>
<div class="flex-item">
<img class="img-responsive img-center img5" src="http://jshanks24.github.io/Udacity-Portfolio-Site/images/neighborhood-map_small.jpg"; alt="Neighborhood Map">
<h3 class="footer">Neighborhood Map</h3>
</div>
<div class="flex-item">
<img class="img-responsive img-center img6" src="http://jshanks24.github.io/Udacity-Portfolio-Site/images/feedreader-testing_small.jpg"; alt="Feedreader Testing">
<h3 class="footer">Feedreader Testing</h3>
</div>
</div>
</div>
<!-- End Project Section -->
<!-- About Section -->
<div class="About-Section text-color" id="about">
<h2>About</h2>
<hr>
<!--summary-->
<div class="Summary">
<p>Hi, my name is Boyan Liu. I am a front-end web developer. I am taking Front-end Nanodegree at Udacity. This is great experience and I have learned so many more skills to add to my skillset so far.I love learning about the latest technologies and am always aiming to improve my skills
This web page is the first Project in the Udacity Front-end Nanodegree.
is a refactored version of the first project in the Udacity Front-end Nanodegree.
</p>
</div>
<!--My skill set-->
<div class="Skill-Set">
<h3>My Skills</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Java</li>
</ul>
</div>
<!-- End About Section -->
</div>
<!-- Contact Section -->
<div class="Contact-Section text-color" id="contact">
<h2>Contact Me</h2>
<hr >
<div class="Contact-Icons">
<p><i class="fa fa-map-marker icon-size "></i> College Park, US</p>
<p><i class="fa fa-phone icon-size "></i> Phone: +2068224758</p>
<p><i class="fa fa-envelope icon-size "> </i> Email: lbyybl1996@gmail.com</p>
</div>
<!-- Google Map -->
<div id="googleMap" class="Myaddress" style="background-color: grey; width:100%;height:300px;margin:50px 0;"></div>
<!-- Get In Touch -->
<div>
<p>Lets get in touch. Send me a message:</p>
<form action="/action_page.php" target="_blank">
<p><input class="input_inf input-padding " type="text" placeholder="Name" required name="Name"></p>
<p><input class="input_inf input-padding " type="text" placeholder="Email" required name="Email"></p>
<p><input class="input_inf input-padding " type="text" placeholder="Subject" required name="Subject"></p>
<p><input class="input_inf input-padding " type="text" placeholder="Message" required name="Message"></p>
<p>
<button class="w3-button w3-light-grey w3-padding-large" type="submit">
<i class="fa fa-paper-plane"></i> SEND MESSAGE
</button>
</p>
</form>
</div>
<!-- End Contact Section -->
</div>
</div>
<!-- Footer -->
<div class="footer2">
<footer class="container center-position">
<i class="fa fa-facebook-official "></i>
<i class="fa fa-instagram "></i>
<i class="fa fa-snapchat "></i>
<i class="fa fa-pinterest-p "></i>
<i class="fa fa-twitter "></i>
<i class="fa fa-linkedin "></i>
<p class="pull"><a href="#">Back to top</a></p>
<p>Made with <span class="love">♥</span> by <a href="https://github.com"; target="_blank">Boyan Liu</a></p>
<!-- End footer -->
</footer>
<!-- END PAGE CONTENT -->
</div>
<!-- Add Google Maps -->
<script>
function myMap()
{
myCenter=new google.maps.LatLng(39.005142, -76.930662);
var mapOptions= {
center:myCenter,
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
//Put a marker on the map
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
// Open and close sidebar
function openNav() {
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
document.getElementById("mySidebar").style.width = "30%";
document.getElementById("mySidebar").style.display = "block";
} else {
/* the viewport is less than 400 pixels wide */
document.getElementById("mySidebar").style.width = "60%";
document.getElementById("mySidebar").style.display = "block";
}
}
function closeNav() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
</html>
答案 0 :(得分：0)
除非我错过了，否则看起来你已经指定了图像的宽度。您可以将width =“100％”作为图像的属性，或者为图像提供一个说.full-width的类，并将宽度设置为100％。
我会推荐第一个，因为那时你可以将该类添加到任何元素，它将导致它调整大小。
<style>
.full-width {
width:100%;
}
</style>
<div class="main-container">
<div class="grid">
<div class="Row">
<img class="full-width"src="http://www.wallpaperup.com/uploads/wallpapers/2012/12/22/26202/big_thumb_efa8696da34157aaf43d587d1f6b8299.jpg"alt="main image">
</div>
</div>
</div>