我试图在指定高度300px内成比例地使用自举列与图像匹配,我尝试了很多方法但不幸的是它不适合列宽(我的第一个图像尺寸是262 * 380和第二个图像尺寸546 * 380和im使用img-responsive类)
我需要我的图片应该像Expected
一样但是我得到这样的Actual
我的HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="grid">
<img src="https://static5.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lunch-5502ae26.jpg" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-8">
<div class="grid">
<img src="https://static7.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lounge-0cd3d802.jpg" class="img-responsive" alt="">
</div>
</div>
</div>
我的CSS
.grid {
height: 300px;
border-right: 4px;
}
.grid img {
height: 100%;
}
答案 0 :(得分:0)
试试这个HTML:
<div class="container">
<div class="row">
<div class="col-md-4 bg-cover grid" style="background-image: url(https://static5.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lunch-5502ae26.jpg)">
</div>
<div class="col-md-8 bg-cover grid" style="background-image: url(https://static7.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lounge-0cd3d802.jpg)">
</div>
</div>
</div>
使用这个CSS:
.grid {
height: 300px;
}
.grid img {
height: 100%;
}
.bg-cover {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 300px
}