我正在尝试在div的右侧设置图像。但不知何故，图像不适合div。 .HTML：
<div class="container" >
<div class= "row list-container">
<div class="col-md-10">
<h3>This contains some description</h3>
</div>
<div class="col-md-2" >
<img src = "img/Websitebackground.jpg" class = "img-responsive">
</div>
</div>
</div> <!-- /.container -->
.CSS：
#list-section{
background:white;
margin-top:100px;
}
.list-container{
margin:20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
演示：https://jsfiddle.net/sakib_rahman_cse11/czLvkr7z/
我想要的是这样的东西：https://i.stack.imgur.com/Aov1M.jpg
如果我真的理解你...
图像具有默认属性display: inline-block;这会导致图像下方出现5px空白。如果要删除此5px空间，请设置以下内容：
.img-responsive { display: block;}
这看起来像是你试图实现的目标吗？ 您可以调整宽度和高度(绝对或相对)，但主要思想是使用background-image而不是<img>标签，并使用background-size:100% auto;使其响应，如前所述 这里。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, .container {
width: 100%;
height: 100%;
}
.desc-bg-div {
height: 20%;
background-image: url("http://i.imgur.com/TpVSw4X.jpg");
background-repeat: no-repeat;
background-position: right;
padding: 0;
position: relative;
}
.opaque-div {
background: rgb(0, 0, 0); /* Fallback for older browsers without RGBA-support */
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="container" >
<div class="row outer">
<div class="col-md-10">
<p>your content goes here</p>
</div>
<div class="col-md-2 desc-bg-div">
<div class="opaque-div">
<h3 class="description">This contains some description</h3>
</div>
</div>
</div>
</div>
</body>
</html>
使用响应式标签
我使用了col-xs-*而不是col-md-*，一切都有效
<div class="container" >
<div class= "row list-container">
<div class="col-xs-10">
<h3>This contains some description</h3>
</div>
<div class="col-xs-2" style="padding:0 !important; margin: 0 !important">
<img src = "http://i.imgur.com/TpVSw4X.jpg" >
</div>
</div>
</div> <!-- /.container -->
https://jsfiddle.net/sakib_rahman_cse11/czLvkr7z/