There are related questions here or here, although none seemed to work for me.
这里或这里有相关的问题,虽然似乎没有一个对我有用。
I've followed the Bootstrap example to implement thumbnails with captions. However, my caption texts are of different lengths causing different heights for the three thumbnails. That looks rather ugly. To fix this I've tried the matchHeight jQuery plugin, but that didn't have an effect.
我已经按照Bootstrap示例来实现带有标题的缩略图。但是,我的标题文本具有不同的长度,导致三个缩略图的高度不同。这看起来很难看。为了解决这个问题,我尝试了matchHeight jQuery插件,但是没有效果。
This is my code:
这是我的代码:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.matchHeight-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".thumbnail").matchHeight({ byRow: true, });
</script>
</head>
<body>
...
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="img/img-1.jpg" alt="">
<div class="caption">
<h4>Heading 1</h4>
<p>...</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="img/img-2.jpg" alt="">
<div class="caption">
<h4>Heading 2</h4>
<p>...</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="img/img-3.jpg" alt="">
<div class="caption">
<h4>Heading 3</h4>
<p>...</p>
</div>
</div>
</div>
</div>
...
</body>
What am I missing here? How can I get these three thumbnail to align nicely?
我在这里错过了什么?如何让这三个缩略图很好地对齐?
3 个解决方案
#1
.thumbnail {
height: 547px;
overflow-y: hidden;
}
.img-responsive {
margin-bottom: 30px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
<div class="caption">
<h4>Heading 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit maximus nulla id eleifend. Curabitur sit amet tellus vitae orci condimentum aliquam. Aenean facilisis lacinia suscipit. Cras quam massa, pharetra a convallis nec,
gravida eu metus. Phasellus gravida faucibus nulla, sit amet suscipit purus. Donec luctus, ligula sed finibus congue, libero odio ultricies nulla, a pharetra diam mauris non turpis. Phasellus a aliquet lorem.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
<div class="caption">
<h4>Heading 2</h4>
<p>Nullam pulvinar posuere arcu ac mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis in interdum leo. Nunc sed purus vel eros mollis pharetra sit amet sit amet felis. Ut pharetra mi ac dolor
dignissim facilisis. Phasellus odio massa, pulvinar sed velit ac, malesuada posuere urna. Aliquam urna eros, sollicitudin et diam quis, lacinia feugiat erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aenean porttitor, tortor sit amet accumsan placerat, ante augue pretium nunc, vel volutpat turpis ex vitae dui. Etiam imperdiet turpis sed ante posuere, venenatis lobortis lorem pharetra.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
<div class="caption">
<h4>Heading 3</h4>
<p>Quisque mollis sollicitudin tellus, in sagittis diam rutrum ut. Mauris ex arcu, vehicula et ullamcorper id, viverra vel nibh. Ut vestibulum tellus vel erat lobortis, quis fringilla nulla semper. Proin a varius tortor, ac varius tortor. Sed fringilla
dignissim neque cursus sit amet. Maecenas molestie hendrerit orci, ut faucibus mauris tempor in.</p>
</div>
</div>
</div>
</div>#2
Try this for js:
试试这个js:
(function() {
$(function() {
$('.thumbnail').matchHeight({
byRow: true,
property: 'height',
target: null,
remove: false
});
});
})();
#3
I ended up using a neat trick from this answer, and writing my own code. The #mq-detector element tells me when media queries switch without me having to hard-code viewport widths. Then I hooked into the window's resize callback to know when the user changes the size of the browser window:
我最终在这个答案中使用了一个巧妙的技巧,并编写了我自己的代码。 #mq-detector元素告诉我媒体查询何时切换,而不必硬编码视口宽度。然后我迷上了窗口的调整大小回调,以了解用户何时更改浏览器窗口的大小:
<script type="text/javascript">
(function() {
$(window).resize(checkAdjustThumbnailHeight);
$(document).ready(checkAdjustThumbnailHeight);
})();
</script>
The checkAdjustThumbnailHeight function is called the first time when the page is rendered, and every time the browser's resize event fires. That function checks the media detector element and adjusts the thumbnail heights accordingly:
checkAdjustThumbnailHeight函数在第一次呈现页面时调用,并且每次触发浏览器的resize事件时都会调用。该功能检查介质检测器元素并相应地调整缩略图高度:
function checkAdjustThumbnailHeight() {
if ($("#mq-detector > span.visible-lg").is(":visible")) {
adjustThumbnailHeight();
}
else if ($("#mq-detector > span.visible-md").is(":visible")) {
adjustThumbnailHeight();
}
else if ($("#mq-detector > span.visible-sm").is(":visible")) {
inheritThumbailHeight();
}
else if ($("#mq-detector > span.visible-xs").is(":visible")) {
inheritThumbailHeight();
}
else { }
}
Note that for sm and xs (actual pixel values see here) sizes I do not modify the thumbnail height because in those cases the thumbnails are rendered one above the other, not next to each other. For md and lg sizes, I set the thumbnail heights to the largest one:
请注意,对于sm和xs(实际像素值,请参见此处)尺寸,我不会修改缩略图高度,因为在这些情况下缩略图会一个在另一个上方呈现,而不是彼此相邻。对于md和lg大小,我将缩略图高度设置为最大高度:
function adjustThumbnailHeight() {
var heights = [ ];
$(".thumbnail").each(function() {
heights.push( $(this).height() );
});
var max = Math.max.apply(null, heights);
$(".thumbnail").each(function() {
$(this).height(max);
});
}
function inheritThumbailHeight() {
$(".thumbnail").each(function() {
$(this).css("height", "inherit");
});
}
This seems to work fine.
这似乎工作正常。
ADDENDUM Because some images may take more time to finish loading, the height of the thumbnails can be skewed. Therefore I used the imageLoaded plugin to defer adjusting the thumbnails heights until all images have finished loading.
附录由于某些图像可能需要更长时间才能完成加载,因此缩略图的高度可能会偏斜。因此,我使用imageLoaded插件来推迟调整缩略图高度,直到所有图像都完成加载。
#1
.thumbnail {
height: 547px;
overflow-y: hidden;
}
.img-responsive {
margin-bottom: 30px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
<div class="caption">
<h4>Heading 1</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit maximus nulla id eleifend. Curabitur sit amet tellus vitae orci condimentum aliquam. Aenean facilisis lacinia suscipit. Cras quam massa, pharetra a convallis nec,
gravida eu metus. Phasellus gravida faucibus nulla, sit amet suscipit purus. Donec luctus, ligula sed finibus congue, libero odio ultricies nulla, a pharetra diam mauris non turpis. Phasellus a aliquet lorem.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
<div class="caption">
<h4>Heading 2</h4>
<p>Nullam pulvinar posuere arcu ac mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis in interdum leo. Nunc sed purus vel eros mollis pharetra sit amet sit amet felis. Ut pharetra mi ac dolor
dignissim facilisis. Phasellus odio massa, pulvinar sed velit ac, malesuada posuere urna. Aliquam urna eros, sollicitudin et diam quis, lacinia feugiat erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Aenean porttitor, tortor sit amet accumsan placerat, ante augue pretium nunc, vel volutpat turpis ex vitae dui. Etiam imperdiet turpis sed ante posuere, venenatis lobortis lorem pharetra.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="thumbnail">
<img class="img-responsive" src="http://cdn.makeuseof.com/wp-content/uploads/2012/01/8bit_mushroom_intro.jpg?92a7a3" alt="">
<div class="caption">
<h4>Heading 3</h4>
<p>Quisque mollis sollicitudin tellus, in sagittis diam rutrum ut. Mauris ex arcu, vehicula et ullamcorper id, viverra vel nibh. Ut vestibulum tellus vel erat lobortis, quis fringilla nulla semper. Proin a varius tortor, ac varius tortor. Sed fringilla
dignissim neque cursus sit amet. Maecenas molestie hendrerit orci, ut faucibus mauris tempor in.</p>
</div>
</div>
</div>
</div>#2
Try this for js:
试试这个js:
(function() {
$(function() {
$('.thumbnail').matchHeight({
byRow: true,
property: 'height',
target: null,
remove: false
});
});
})();
#3
I ended up using a neat trick from this answer, and writing my own code. The #mq-detector element tells me when media queries switch without me having to hard-code viewport widths. Then I hooked into the window's resize callback to know when the user changes the size of the browser window:
我最终在这个答案中使用了一个巧妙的技巧,并编写了我自己的代码。 #mq-detector元素告诉我媒体查询何时切换,而不必硬编码视口宽度。然后我迷上了窗口的调整大小回调,以了解用户何时更改浏览器窗口的大小:
<script type="text/javascript">
(function() {
$(window).resize(checkAdjustThumbnailHeight);
$(document).ready(checkAdjustThumbnailHeight);
})();
</script>
The checkAdjustThumbnailHeight function is called the first time when the page is rendered, and every time the browser's resize event fires. That function checks the media detector element and adjusts the thumbnail heights accordingly:
checkAdjustThumbnailHeight函数在第一次呈现页面时调用,并且每次触发浏览器的resize事件时都会调用。该功能检查介质检测器元素并相应地调整缩略图高度:
function checkAdjustThumbnailHeight() {
if ($("#mq-detector > span.visible-lg").is(":visible")) {
adjustThumbnailHeight();
}
else if ($("#mq-detector > span.visible-md").is(":visible")) {
adjustThumbnailHeight();
}
else if ($("#mq-detector > span.visible-sm").is(":visible")) {
inheritThumbailHeight();
}
else if ($("#mq-detector > span.visible-xs").is(":visible")) {
inheritThumbailHeight();
}
else { }
}
Note that for sm and xs (actual pixel values see here) sizes I do not modify the thumbnail height because in those cases the thumbnails are rendered one above the other, not next to each other. For md and lg sizes, I set the thumbnail heights to the largest one:
请注意,对于sm和xs(实际像素值,请参见此处)尺寸,我不会修改缩略图高度,因为在这些情况下缩略图会一个在另一个上方呈现,而不是彼此相邻。对于md和lg大小,我将缩略图高度设置为最大高度:
function adjustThumbnailHeight() {
var heights = [ ];
$(".thumbnail").each(function() {
heights.push( $(this).height() );
});
var max = Math.max.apply(null, heights);
$(".thumbnail").each(function() {
$(this).height(max);
});
}
function inheritThumbailHeight() {
$(".thumbnail").each(function() {
$(this).css("height", "inherit");
});
}
This seems to work fine.
这似乎工作正常。
ADDENDUM Because some images may take more time to finish loading, the height of the thumbnails can be skewed. Therefore I used the imageLoaded plugin to defer adjusting the thumbnails heights until all images have finished loading.
附录由于某些图像可能需要更长时间才能完成加载,因此缩略图的高度可能会偏斜。因此,我使用imageLoaded插件来推迟调整缩略图高度,直到所有图像都完成加载。