考虑我在bootstrap 3中的示例布局:
<div class="row">
<div class="col-md-6">
<div class="row">
<img class="filler" src="some/other/img.jpg" />
</div>
<div class="row">
<img class="filler" src="some/other/img.jpg" />
</div>
</div>
<div class="col-md-6">
<img class="main-img" src="some/link.jpg" style="width: 100%; height: auto" />
</div>
</div>
如何使用filler
类制作图像以自动缩放以获得与main-img
类图像相同的高度。
我想达到以下效果:
________ ____________
|.filler | |
|________|auto-scale |
|.filler |width: 100% |
|________|____________|
这个事件只能用css吗?
编辑: 我的意思是身高不是,宽度(我的不好);
答案 0 :(得分:1)
基本上你没有对Bootstrap HTML
标记给予足够的重视,这对于它保持“智能”和响应非常重要。
.filler,
.main-img {
width: 100%;
height: auto
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row-fluid">
<div class="col-md-6">
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
<div class="col-md-6">
<img class="main-img" src="http://www.gettyimages.com/gi-resources/images/frontdoor/creative/PanoramicImagesRM/FD_image.jpg" />
</div>
在我们在评论中谈到的lil'之后,决定用一些代码支持我说的话。用jQuery完成,因为它更快(对我而言)。如果你的项目中还没有jQuery,你应该在javascript中重写它。没有经过全面测试,但我认为没有任何理由不应该跨浏览器,跨平台工作:
document.initPictures = function() {
$('.resizeMe').css({
'height': $('#theContainer .col-sm-6').eq(1).height() + 6,
'display': 'flex',
'flex-direction': 'column',
'transition': 'height .4s cubic-bezier(0.55, 0, 0.55, 0.2)'
});
$('.resizeMe img').each(function() {
var src = $(this).attr('src');
$('.resizeMe').append('<div style="flex-basis: 50%; background-image: url(' + src + '); background-size:cover; background-position: center center"' + '</div>');
$(this).remove();
})
};
document.resizePictures = function() {
if ($('#theContainer').outerWidth() > 768) {
$('.resizeMe').css({
'height': $('#theContainer .col-sm-6').eq(1).height()
});
} else {
$('.resizeMe').css({
'height': $('.resizeMe').outerWidth()
});
}
};
$(window).resize(function() {
document.resizePictures();
});
document.initPictures();
.main-img {
width: 100%;
height: auto
}
#theContainer {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row-fluid" id="theContainer">
<div class="col-sm-6 resizeMe">
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
<img class="filler" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg" />
</div>
<div class="col-sm-6">
<img class="main-img" src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg" />
</div>
注意:如果有人可以向我解释为什么$('#theContainer .col-sm-6').eq(1).height()
在页面加载时比6px
小.FirstOrDefault();
,我会非常高兴。