-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％; 高度：自動; } –