-1
任何人都可以帮助我为什么主图像，页面的第一张图片，没有延伸到整个页面。它只显示在web.I试图让第一张图像的宽度相同的宽度下面的图像。需要一些帮助，从HTML和CSS，代码不能正常工作
此外，我试图等于投资组合部分中的所有图像具有相同的高度，这一个也没有按我的预期工作。我遵循从其他资源的教程。但我不知道有什么问题...
感谢您的任何帮助，我真的很感激它。感谢一百万次~~！
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: [email protected]</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>
我刚刚注意到你已经有了这门课。如果您将此类添加到它，它应该全部设置为 .img-responsive { max-width：100％; 高度：自动; } –