我正在尝试使用和其中一个列中的图像和另一个列中的图像堆叠2个列行，并为每个不同的行交替显示。我无法让我的照片填满他们所在的容器。我也无法使它们具有相同的尺寸（我已经能够将顶部图片填满其容器）。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ESQ_Main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<title>ESQ BUILDS:RESIDENTIAL</title>
</head>
<body>
<div class="menu">
<div class="container">
<div class="row">
<div class = "col-md-2">
</div>
<div class = "col-md-2">
<a class="btn" href="https://www.google.com/">Home</a>
</div>
<div class="col-md-2">
<a class="btn" href="https://www.google.com/">About</a>
</div>
<div class = "col-md-2">
<a class="btn" href="https://www.google.com/">Services</a>
</div>
<div class="col-md-2">
<a class="btn" href="https://www.google.com/">Conact Us</a>
</div>
<div class="col-md-2">
</div>
</div>
</div>
<div class="header_r">
<div class="container-fluid">
<div class="head">
<h1>
RESIDENTIAL
</h1>
</div>
</div>
</div>
<div class="label">
<div class="container">
<h2>
Open Projects
</h2>
</div>
</div>
<div class="project">
<div class = "container-fluid">
<div class="row">
<div class="col-md-6 col-xs-9">
<h3>
Nantucket
</h3>
<h5>
</h5>
<a href="">
VIEW
</a>
</div>
<div class="col-md-6 col-xs-9">
<a href="https://www.google.com/"><img class="img-responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg"></a>
</div>
</div>
</div>
</div>
<div class="project">
<div class = "container">
<div class="row">
<div class="col-md-6 col-xs-9">
<a href="https://www.google.com/"><img class="img-responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg"></a>
</div>
<div class="col-md-6 col-xs-9">
<h3>
Nantucket
</h3>
<h5>
</h5>
<a href="">
VIEW
</a>
</div>
</div>
</div>
</div>
<div class="label">
<div class="container">
<h2>
Past Projects
</h2>
</div>
</div>
<div class="project">
<div class = "container">
<div class="row">
<div class="col-md-6 col-xs-9">
<h3>
PAST PROJECT
</h3>
<h5>
</h5>
<a href="">
VIEW
</a>
</div>
<div class="col-md-6 col-xs-9">
<a href="https://www.google.com/"><img class="img- responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg"></a>
</div>
</div>
</div>
</div>
</body>
</html>
html,body{
margin:0;
background-color:#CDB389;
}
/*This code is for a different html page. Look under the
Residential heading at the bottom of this code*/
/*HOME HOME HOME HOME HOME HOME HOME HOME HOME*/
/*MENU*/
.menu{
width:100%;
height:50px;
background-color:#CDB389;
text-align:center;
margin-bottom:0px;
padding-top:-3px;
}
.menu .row{
padding-top:5px;
padding-bottom:10px;
}
.menu .btn{
color:black;
font-size:20px;
font-weight:900;
}
/*HEADER*/
.header{
height:600px;
background:url("http://esqbuilds.com/images/luxury-builder- houston2.jpg");
background-size:cover;
margin-top:-2px;
margin-bottom:-10px;
}
/*LABEL*/
.label{
margin-top:-5px;
background-color:#CDB389;
}
.label h2{
letter-spacing:15px;
font-size:60px;
text-decoration:uppercase;
font-family:cursive;
color:black;
}
/*Services*/
#extend{
padding-bottom:50px;
}
/*FOOTER*/
/*BUTTON*/
.btn:link{
text-decoration:none
}
.btn:hover{
}
/*RESIDENTIAL RESIDENTIAL RESIDENTIAL RESIDENTIAL*/
.head {
text-align:center;
}
.project .row {
width:100%;
}
.project img {
min-height:300px;
min-width:400px;
}
html,body{
margin:0;
background-color:#CDB389;
}
/*This code is for a different html page. Look under the
Residential heading at the bottom of this code*/
/*HOME HOME HOME HOME HOME HOME HOME HOME HOME*/
/*MENU*/
.menu{
width:100%;
height:50px;
background-color:#CDB389;
text-align:center;
margin-bottom:0px;
padding-top:-3px;
}
.menu .row{
padding-top:5px;
padding-bottom:10px;
}
.menu .btn{
color:black;
font-size:20px;
font-weight:900;
}
/*HEADER*/
.header{
height:600px;
background:url("http://esqbuilds.com/images/luxury-builder-houston2.jpg");
background-size:cover;
margin-top:-2px;
margin-bottom:-10px;
}
/*LABEL*/
.label{
margin-top:-5px;
background-color:#CDB389;
}
.label h2{
letter-spacing:15px;
font-size:60px;
text-decoration:uppercase;
font-family:cursive;
color:black;
}
/*Services*/
#extend{
padding-bottom:50px;
}
/*FOOTER*/
/*BUTTON*/
.btn:link{
text-decoration:none
}
.btn:hover{
}
/*RESIDENTIAL RESIDENTIAL RESIDENTIAL RESIDENTIAL*/
.head {
text-align:center;
}
.project .row {
width:100%;
}
.project img {
min-height:300px;
min-width:400px;
}
答案 0 :(得分：0)
您可以使用overflow:hidden;将图片包装在div中并设置width:100%; height:auto;
或者，您可以将图片设置为背景图片并将其设置为background-size:cover;，这样会有响应。
答案 1 :(得分：0)
我明白了！所以，我添加了这个类：
size{
max-width:500px
height:auto;
}
然后我将每个图像包装在链接中，并将img-responsive类添加到图像中。
<div class="col-md-6 col-xs-9">
<a class"size" href="https://www.google.com/">
<img class="img-responsive" src="http://esqbuilds.com/images/new-galleria-area-townhomes.jpg"/>
</a>
</div>
这为我提供了屏幕一侧的完整图像，并为另一侧的文本留出了空间。它还将图像保持在屏幕宽度内。此外，当屏幕缩小时，它会相对很好地堆叠（堆栈可能更加均匀/居中）。仍然需要检查移动响应。
我很开心。