体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

图片对齐的问题

来源：2-7 作业题

_YI__

2019-01-10 23:12:41

gallery区域，下面黑色的那个东西超出了图片的大小，怎么让它和图片一起变大缩小？

http://img.mukewang.com/climg/5c375f6f000146eb06540357.jpg

第三幅图没有过去，如何解决？如果设置了高度，那么在不同px下也要重新的给有问题的图片重新设置高度，有点麻烦，有没有比较简单的方法？

http://img.mukewang.com/climg/5c375ffd000122e110360783.jpg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title></title>	
		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		
	</head>
	<body>
		<header id="header">
			<div class="container">
				<nav class="navbar navbar-default ">
				  <div class="container-fluid">
				    <!-- Brand and toggle get grouped for better mobile display -->
				    	<div id="head-logo">
				    		<img src="image/logo.png"/>
				    	</div>
					    <div class="navbar-header ">
					      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
					        <span class="sr-only">Toggle navigation</span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					        <span class="icon-bar"></span>
					      </button>
					    </div>
				   
					    <!-- Collect the nav links, forms, and other content for toggling -->
					    <div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
						    <ul class="nav navbar-nav navbar-left">
						        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
						       <li class="dropdown">
						          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
						          	生日<span class="caret"></span>
						          </a>
						          <ul class="dropdown-menu">
						            <li><a href="#">关系</a><a href="#">风味</a></li>
						            <li><a href="#">朋友 </a><a href="#">巧克力 </a></li>
						            <li><a href="#">爱人</a><a href="#">水果</a></li>
						            <li><a href="#">姐妹</a></li>
						          </ul>
						        </li>
						        <li class="dropdown">
						          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
						          	婚礼<span class="caret"></span>
						          </a>
						          <ul class="dropdown-menu">
						            <li><a href="#">关系</a><a href="#">风味</a><a href="#">主旋律</a></li>
						            <li><a href="#">朋友 </a><a href="#">巧克力 <a href="#">心性</a></a></li>
						            <li><a href="#">爱人</a><a href="#">水果</a><a href="#">卡通</a></li>
						            <li><a href="#">姐妹</a></li>
						          </ul>
						        </li>
						        <li class="dropdown">
						          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
						          	专用<span class="caret"></span>
						          </a>
						          <ul class="dropdown-menu">
						            <li><a href="#">关系</a><a href="#">风味</a></li>
						            <li><a href="#">朋友 </a><a href="#">巧克力 </a></li>
						            <li><a href="#">爱人</a><a href="#">水果</a></li>
						            <li><a href="#">姐妹</a></li>
						          </ul>
						        </li>
						        <li class="dropdown">
						          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
						          	商铺<span class="caret"></span>
						          </a>
						          <ul class="dropdown-menu">
						            <li><a href="#">关系</a><a href="#">风味</a></li>
						            <li><a href="#">朋友 </a><a href="#">巧克力 </a></li>
						            <li><a href="#">爱人</a><a href="#">水果</a></li>
						            <li><a href="#">姐妹</a></li>
						          </ul>
						        </li>
						    </ul>
						   
				   		</div><!-- /.navbar-collapse -->
				    </div><!-- /.container-fluid -->
				</nav>
				<!--右侧导航-->
				<div class="navbar-right" id="xiaotubiao">
					<ul class="nav navbar-nav ">
					    <li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
							    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
							</a>
						<!--	<div class="sanjia"></div>  <!--新加的-->-->
							<ul class="dropdown-menu">
						        <form class="form-inline ">
							        <div class="form-group">
							          <input type="text" class="form-control" placeholder="">
							        </div>
							        <button type="submit" class="btn btn-default">搜</button>
						   	    </form>
					        </ul>
						</li>
						<li class="dropdown">
					        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
					        	<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
					        </a>
					        <ul class="dropdown-menu">
						        <form class="form-group ">
							        <div class="form-group">
							        	<p>Email</p>
									    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="">
									</div>
							        <div class="form-group">
										<p>Password</p>
										<input type="password" class="form-control" id="exampleInputPassword3" placeholder="">
									</div>
									<buttom type="submit" class="btn btn-default form-control">登录</buttom>
									<div class="checkbox">
									    <label>
									      <input type="checkbox"> 记住
									    </label>
									</div>
									<p class="juzhong">新用户? <span class="yellow">注册|</span> 忘记密码</p>
						   	    </form>
					       	</ul>
					    </li>
				        <li class="dropdown">
					     	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
					       		<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
					       	</a>
					       	<ul class="dropdown-menu">
					    	    <p class="juzhong ">$0.00(0)</p>
					    	   	<button type="button" class=" form-control bgo-cow">空</button>
				            </ul>
						</li>
					</ul>
				</div>
			</div>
		</header>

		<section class="banner container">
			<div class="banner-text">
				<h1>IMOOC <span>蛋糕</span></h1>
				<p>特别的日子，特别的你</p>
				<input type="button" class="btn btn-default" value="SHOP NOW"/>
			</div>
			<div class="banner-img">
				<img src="image/2.png"/>
			</div>
		</section>
		
		<div class="gallery">
			<div class="container">
				<div class="row">
					<div class="col-md-8 col-sm-8 col-xs-12">
						<img src="image/g1.jpg"/>
						<div class="yingcang">
							<div class="yc-left">
								 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>view
							</div>
							<input type="button" class="btn btn-default" name="" id="" value="SHOP NOW" />
						</div>
						<div class="name">
							<p class="bold mgtop20">Lorem Ipsum is simply</p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<span>$95</span>
						</div>
					</div>
					<div class="col-md-4 col-sm-4 col-xs-6">
						<img src="image/g2.jpg"/>
						<div class="yingcang">
							<div class="yc-left">
								 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>view
							</div>
							<input type="button" class="btn btn-default" name="" id="" value="SHOP NOW" />
						</div>
						<div class="name">
							<p class="bold mgtop20">Lorem Ipsum is simply</p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<span>$95</span>
						</div>
					</div>
				
				
					<div class="col-md-3 col-sm-4 col-xs-6">
						<img src="image/g3.png"/>
						<div class="yingcang">
							<div class="yc-left">
								 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>view
							</div>
							<input type="button" class="btn btn-default" name="" id="" value="SHOP NOW" />
						</div>
						<div class="name">
							<p class="bold mgtop20">Lorem Ipsum is simply</p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<span>$95</span>
						</div>
					</div>
					<div class="col-md-3 col-sm-4 col-xs-6">
						<img src="image/g4.png"/>
						<div class="yingcang">
							<div class="yc-left">
								 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>view
							</div>
							<input type="button" class="btn btn-default" name="" id="" value="SHOP NOW" />
						</div>
						<div class="name">
							<p class="bold mgtop20">Lorem Ipsum is simply</p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<span>$95</span>
						</div>
					</div>
					<div class="col-md-3 col-sm-4 col-xs-6">
						<img src="image/g5.png"/>
						<div class="yingcang">
							<div class="yc-left">
								 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>view
							</div>
							<input type="button" class="btn btn-default" name="" id="" value="SHOP NOW" />
						</div>
						<div class="name">
							<p class="bold mgtop20">Lorem Ipsum is simply</p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<span>$95</span>
						</div>
					</div>
					<div class="col-md-3 col-sm-4 col-xs-6">
						<img src="image/g6.png"/>
						<div class="yingcang">
							<div class="yc-left">
								 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>view
							</div>
							<input type="button" class="btn btn-default" name="" id="" value="SHOP NOW" />
						</div>
						<div class="name">
							<p class="bold mgtop20">Lorem Ipsum is simply</p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<span>$95</span>
						</div>
					</div>
					<div class="col-md-3 col-sm-4 col-xs-6">
						<img src="image/g7.png"/>
						<div class="yingcang">
							<div class="yc-left">
								 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>view
							</div>
							<input type="button" class="btn btn-default" name="" id="" value="SHOP NOW" />
						</div>
						<div class="name">
							<p class="bold mgtop20">Lorem Ipsum is simply</p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<span>$95</span>
						</div>
					</div>
					<div class="col-md-3 col-sm-4 col-xs-6">
						<img src="image/g8.png"/>
						<div class="yingcang">
							<div class="yc-left">
								 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>view
							</div>
							<input type="button" class="btn btn-default" name="" id="" value="SHOP NOW" />
						</div>
						<div class="name">
							<p class="bold mgtop20">Lorem Ipsum is simply</p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<span>$95</span>
						</div>
					</div>
					<div class="col-md-3 col-sm-4 col-xs-6">
						<img src="image/g9.png"/>
						<div class="yingcang">
							<div class="yc-left">
								 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>view
							</div>
							<input type="button" class="btn btn-default" name="" id="" value="SHOP NOW" />
						</div>
						<div class="name">
							<p class="bold mgtop20">Lorem Ipsum is simply</p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<span>$95</span>
						</div>
					</div>
					<div class="col-md-3 col-sm-4 col-xs-6">
						<img src="image/g10.png"/>
						<div class="yingcang">
							<div class="yc-left">
								 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>view
							</div>
							<input type="button" class="btn btn-default" name="" id="" value="SHOP NOW" />
						</div>
						<div class="name">
							<p class="bold mgtop20">Lorem Ipsum is simply</p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<p class="start"></p>
							<span>$95</span>
						</div>
					</div>
				</div>					
			</div>
		</div>
		
		
		
		<script src="javascript/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="javascript/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
*{
	margin: 0;
	padding: 0;
}
#header{
	width: 100%;
	height: 66px;
	background: #5D4B33;
}
.nav > li {
	float: left;
}

#head-logo{
	float: left;
}

.container-fluid{
	background:#5D4B33 ;
	height: 66px;
}
.navbar-default{
	background:#5D4B33;
	border: none;
	line-height: 66px;
	height: 66px;
	float: left;
}
.navbar-default .navbar-nav > li > a{
	width: 72px;
	height: 66px;
    line-height: 40px;
    text-align: center;
    color: white;
}
.navbar-default .navbar-nav > li > a:hover{
	color: white;
	background: #F07818;
}
/*.nav > li > a:hover, .nav > li > a:focus{
	color: white;
	background: #5D4B33;
}*/
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus{
	background: #F07818;
	color:white ;
	height: 66px;
    line-height: 40px;
    text-align: center;
}
.navbar-default .navbar-nav > li > a:hover,
 .navbar-default .navbar-nav > li > a:focus{
 	color: white;
	background: #5D4B33;
}


.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover,
 .navbar-default .navbar-nav > .open > a:focus{
 	background: #F07818;
	color:white ;
 }

/*一级菜单下的二级菜单*/
.dropdown-menu > li{
	width: 250px;
	height: 40px;
}
.dropdown-menu > li > a{
	display: inline-block;
	margin-left: 5px;
	
}
.dropdown-menu > li:first-child>a{
	color:#F07818 ;
	border-bottom:1px solid lightgrey ;
	font-size: 16px;
}

/*右上角小图标导航*/
#xiaotubiao{
	float: right;
}
#xiaotubiao>.navbar-nav > li > a{
	color: white;
	font-size: 28px;
	line-height: 35px;
	width: 70px;
	text-align: center;
	border-left: 1px solid lightgray;
}
#xiaotubiao>.navbar-nav > li > a:hover{
	background:#5D4B33;
	color: white;
}
@media (max-width:768px) {
	#xiaotubiao>.navbar-nav > li > a{
		font-size: 18px;
		float: right;
	}
}
/*#xiaotubiao>.nav .open > a:focus{
	display: block;
	content: "";
	width: 0;
	height: 0;
	border-left: 20px solid #fff;
	border-right: 20px solid #fff;
	border-bottom: 20px solid #fff;
	border-top: 20px solid #fff;
}*/
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus{
	background:#5D4B33;
	color: white;
}

/*搜索二级菜单*/
#xiaotubiao>.navbar-nav > li > .dropdown-menu{
	padding: 20px 10px;
    width: 269px;
}
#xiaotubiao>.navbar-nav > li > .dropdown-menu .form-control{
	border-color:#F07818 ;
}
#xiaotubiao>.navbar-nav > li > .dropdown-menu .btn-default{
	background:#F07818 ;
	color: white;
}
#xiaotubiao .nav > li > a:hover, .nav > li > a:focus{
	background:#5D4B33;
	color: white;
}
/*用户下的二级菜单*/
.juzhong{
	width: 100%;
	text-align: center;
}
.juzhong>.yellow{
	color: #F07818;
}
#xiaotubiao>.navbar-nav > li > .dropdown-menu .btn-default:hover{
	background: white;
	color:#F07818 ;
}
.bgo-cow{
	background:#F07818 ;
	color: white;
}
/*banner区域*/
.banner{
	width: 100%;
	background:#f2f7f6 ;
	position: relative;
}
.banner-text{
	float: left;
	width: 40%;
	position: absolute;
    left: 5%;
    top: 20%;
    margin-left: 38px;
}
.banner-text h1{
	color:#5d4d33 ;
}
.banner-text h1 span,.banner-text p{
	color: #e57c24;
}
.banner-text .btn-default{
	border: 2px solid #5d4d33;
	color:#644835;
	background: #f2f7f6;
}
.banner-text .btn-default:hover{
	border: 2px solid #F07818;
	color:#F07818;
	
}

.banner-img{
	float: right;
	width: 40%;
	max-width: 385px;
	margin: 30px 20px 68px 20px;
	
}
.banner-img img{
	width: 100%;
}

/*gallery区域*/
.gallery{
	width: 100%;
}
.gallery .container .row div[class*="col"]{
	position: relative;
}
.gallery .container div[class*="col"] .image-contaion{
	width: 100%;
}
.gallery .container div[class*="col"] .yingcang{
	position: absolute;
	width: 100%;
	bottom: 77px;
	background: rgba(0,0,0,0.8);
	height: 50px;
}

.gallery .container div[class*="col"] .yingcang .yc-left{
	float: left;
	line-height: 50px;
	font-size: 20px;
	color: white;
	margin-left: 45px;
}
.gallery .container  div[class*="col"] .yingcang .yc-left .glyphicon-eye-open{
	float: left;
	position: absolute;
	left: 18px;
	line-height: 50px;
	font-size: 20px;
	color: white;
	top: 5px;
}

.gallery .container div[class*="col"] .yingcang input{
	float: right;
	margin-right: 30px;
	margin-top: 8px;
	border: 2px solid white;
	background: rgba(0,0,0,0.8);
	color: white;	
}
.gallery .container div[class*="col"] .yingcang input:hover{
	border: 2px solid #F07818;
	color:#F07818;	
}
div[class*="col"]>img{
	width: 100%;
}
.bold{
	font-weight: bold;
}
.mgtop20{
	margin-top: 20px;
}
.name{
	width: 100%;
	height: ;
}
.start{
	height: 17px;
	overflow: hidden;
	position: relative;
	background: url(../image/star.png) 0px -20px no-repeat;
	float: left;
	width: 20px;
}

.gallery .container div[class*="col"] span{
	display: block;
	float: right;
	height: 30px;
	font-size: 20px;
	color:#909ca3 ;
	margin-top: -4px;
}




@media (min-width:999px) {
	.banner{
		height: 447px;
	}
	.banner-text{
		left: 10%;
	}
	.banner-img{
		position: absolute;
		right: 10%;
	}
}

/*@media (max-width:996px) {
	.gallery .container div[class*="col"] .yingcang input {
	    margin-right: 30px;
	    margin-top: 8px;
	}
	.gallery .container div[class*="col"] .yingcang{
		width: 94%;
	}
}*/




@media (max-width:767px) {
	#head-logo{
		float: left;
		line-height: 55px;
		margin-left: 10px;
	}
	#head-logo img{
		/**/
	}
	.navbar-default{
		width: 100%;
		height: 55px;
	}
	#header .navbar-left li{
		float: none;
	}
	.navbar-toggle{
		margin-top:15px ;
	}
	.navbar-default .navbar-nav > .active > a{
		width: 100%;
		background:#5D4B33;
	}
	.navbar-default .navbar-nav > .active > a:hover,
	.navbar-default .navbar-nav > .active > a:focus{
		background:#F07818;
	}
	.container > .navbar-header,
	 .container-fluid > .navbar-header, 
	 .container > .navbar-collapse, 
	 .container-fluid > .navbar-collapse{
	 	margin-left:0px ;
	 	margin-right: 0px;
	 }
	.navbar-default .navbar-nav > li > a{
		background: #5D4B33;
		width:100%;
	}	
	.navbar-default .navbar-nav > li > a:hover{
		background:#F07818;
	}
	.navbar-default .navbar-collapse {
		padding: 0px;
		margin: 0px;
	}
    .navbar-default .navbar-collapse .navbar-nav{
    	margin: 0px;
    	padding: 0px;
      	position: absolute;
	    width: 100%;
	    left: 0px;
	    z-index: 99;
    }	
    .navbar-default .navbar-collapse, .navbar-default .navbar-form{
    	border: none;
    }  	
    .container{
    	padding: 0px;
    }  	
      	
	#xiaotubiao {
	    /*float: right;*/
	   	margin-right: 30px;
	   	position: absolute;
	   	right: 0;
	   	width: 100%;
	}
	#xiaotubiao .btn{
		width: 100%;
	}
	.navbar-toggle{
		padding: 4px 3px;
		
	}
	#xiaotubiao>.navbar-nav > li > a{
		width: 40px;
		padding: 9px 1px;
		font-size:18px ;
		float: right;
		line-height: 28px;
	}
	.navbar-right .nav>li{
		position: relative;
	}
	.navbar-nav .open .dropdown-menu{
		position: absolute;
		right: 0;
		left: auto;
	}
	.container-fluid {
   		height: 55px;
   		padding:0;
	}
	#header{
		height: 55px;
	}
	.navbar-default .navbar-toggle{
		background: #F07818;
		position: absolute;
	    left: 50%;
	    margin-left: -14px;
	    z-index: 99;
	}
	.navbar-default .navbar-toggle:hover, 
	.navbar-default .navbar-toggle:focus{
		background: #F07818;
	}
	
	/*右边小图标二级菜单的设计*/
	#xiaotubiao>.navbar-nav{
		position: absolute;
    	right: 0;
	}
	#xiaotubiao>.navbar-nav form{
		width: 100%;
		position: absolute;
	}
	.banner-text{
		margin-left: 0px;
	}
	.gallery .container .row div[class*="col"]{
		padding: 0px;
   		margin: 0px;
	}
	.row{
		padding: 0px;
   		margin: 0px;
	}
}



@media (max-width:568px) {
	.banner-text p{
		font-size: 11px;
	}
	.banner-text .btn-default{
		width: 40%;
    	min-width: 91px;
    	font-size: 12px;
	}
	.banner-text .btn-default:hover{
		width: 40%;
    	min-width: 91px;
	}
	
	.banner-text h1{
		font-size: 20px;
	}
	
}


写回答

1回答

好帮手慕星星

2019-01-11

已采纳

你好，

1、每个图片底部蒙版显示宽度会超出盒子的宽度，这是因为盒模型为border-box，并且设置了左右padding值为15px，如下：

http://img.mukewang.com/climg/5c381502000170ad14610605.jpg

可以在不同媒体查询中设置蒙版的宽度。

2、第三张图片显示不到左边，是因为第一张图片比第二张图片高的原因，建议在每张图片外层包裹一个div盒子，给盒子设置固定高度，图片在盒子中显示高度为100%。

祝学习愉快！

0

0 学习 · 5012 问题

查看课程

相似问题

为什么subscribe 区的背景图片总是显示不出

回答 2

图片高度不一样的问题

回答 8

text-align为什么也能让图片居中

回答 1

怎么在bootstrap删歌格式内放图片，并且有背景

回答 2

为什么宽度为100%图片就缩小了呢

回答 1

打开慕课网App查看更多内容