- 首页
- 前端开发
- 如何使用 Bootstrap 保留具有不同大小图像的 4 x 2 网格
如何使用 Bootstrap 保留具有不同大小图像的 4 x 2 网格
[英] How can I keep the grid of 4 x 2 with different size of images with Bootstrap
本文介绍了如何使用 Bootstrap 保留具有不同大小图像的 4 x 2 网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 4 x 2 的网格，其中包含产品图片和覆盖图片的一些文字.问题是图像的纵横比将完全不同.
往往发生的情况是，如果一个图像明显高于其他图像，则会导致其他图像失去对齐.我试图找到一种方法来保持所有框的高度相同，每个图像上的文本位置相同，只是图片本身缩小以适应.
这也是响应式的，所以请放大 jsfiddle 上的预览窗口以查看我遇到的问题.
在本例中，我使用了正确的图像尺寸.
JSFiddle: https://jsfiddle.net/w533z8Lg/3/
删除 max-height:292px 并且只有 height:292px 图像在布局方面工作是正确的，但较小的图像被拉伸到那个高度，并且调整大小不会保持纵横比.
编辑 2:我发现了这个 JSFiddle，它是其他人遇到相同问题的解决方案，我会试着去理解它.http://jsfiddle.net/ETkkR/7/
HTML:
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 features_product"><div class="padding"><div class="border"><div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg"/><span class="featured_product_title"><span>项目 1</span></span></a>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 features_product"><div class="padding"><div class="border"><div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x270/8f8f8f/575757.jpg"/><span class="featured_product_title"><span>项目 2</span></span></a>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 features_product"><div class="padding"><div class="border"><div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg"/><span class="featured_product_title"><span>项目 3</span></span></a>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 features_product"><div class="padding"><div class="border"><div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x235/8f8f8f/575757.jpg"/><span class="featured_product_title"><span>项目 4</span></span></a>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 features_product"><div class="padding"><div class="border"><div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x274/8f8f8f/575757.jpg"/><span class="featured_product_title"><span>项目 5</span></span></a>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 features_product"><div class="padding"><div class="border"><div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x160/8f8f8f/575757.jpg"/><span class="featured_product_title"><span>项目 6</span></span></a>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 features_product"><div class="padding"><div class="border"><div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg"/><span class="featured_product_title"><span>项目 7</span></span></a>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 features_product"><div class="padding"><div class="border"><div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x292/8f8f8f/575757.jpg"/><span class="featured_product_title"><span>项目 8</span></span></a>
CSS:
.featured_product {填充左:10px;填充右:10px;底边距:15px；}.featured_products div.padding {填充:5px 10px;}.featured_products div.padding div.border {边框:1px 实心#EAEAEA；}.featured_products div.padding div.border div.innerpadding {填充:5px；文字对齐:居中；宽度:100%；}.featured_products div.padding div.border div.innerpadding img {最大高度:292px；显示:内联块；}span.featured_product_title {位置:绝对；底部:6px；左:0；宽度:100%；背景色:RGBa(255, 255, 255, 0.6);垂直对齐:居中；行高:50px；高度:50px；颜色:#46436f；字体粗细:粗体；字体大小:1.3em；}
解决方案
你不能在不剪掉的情况下把所有的图片都做成一样的大小.
您可以做的是为您定位的每种尺寸的商品添加必要的明确修复.这将使它们保持在正确的网格中.Bootstrap 以这三个断点为目标.
演示: http://jsfiddle.net/w533z8Lg/5/
@media(最小宽度:768px){.featured_products .item:nth-child(2n+1) {清楚:两者；}}@media(最小宽度:992px){.featured_products .item:nth-child(2n+1) {明确:无；}.featured_products .item:nth-child(3n+1) {清楚:两者；}}@media(最小宽度:1200px){.featured_products .item:nth-child(3n+1) {明确:无；}.featured_products .item:nth-child(4n+1) {清楚:两者；}}
I have a grid of 4 x 2 with product images and some text overlaying the image. The problem is that the images are going to be all different aspect ratios.
What tends to happen is that if one image is significantly higher than the rest, it will push the other images out of alignment. I am trying to find a way to keep all the boxes the same height, with the text in the same position on each image, with just the picture scaling itself down to fit.
This is also responsive, so please enlarge the preview window on jsfiddle to see the issue I am having.
In this example, I have used the correct image dimensions.
JSFiddle: https://jsfiddle.net/w533z8Lg/3/
EDIT: Removing the max-height:292px and just having height:292px for the images works in terms of the layout is correct, but the smaller images are stretched to that height, and resizing doesn't keep the aspect ratio.
EDIT 2: I found this JSFiddle which was a solution to someone else with the same issue, I will try to understand it. http://jsfiddle.net/ETkkR/7/
HTML:
<div class="row featured_products list-group">
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
<div class="padding">
<div class="border">
<div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 1</span></span></a>
</div>
</div>
</div>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
<div class="padding">
<div class="border">
<div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x270/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 2</span></span> </a>
</div>
</div>
</div>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
<div class="padding">
<div class="border">
<div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 3</span></span> </a>
</div>
</div>
</div>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
<div class="padding">
<div class="border">
<div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x235/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 4</span></span> </a>
</div>
</div>
</div>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
<div class="padding">
<div class="border">
<div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x274/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 5</span></span> </a>
</div>
</div>
</div>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
<div class="padding">
<div class="border">
<div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x160/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 6</span></span> </a>
</div>
</div>
</div>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
<div class="padding">
<div class="border">
<div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x272/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 7</span></span> </a>
</div>
</div>
</div>
</div>
<div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 featured_product">
<div class="padding">
<div class="border">
<div class="innerpadding product-thumbnail"><a href="#"><img class="img-responsive" src="http://dummyimage.com/226x292/8f8f8f/575757.jpg" /><span class="featured_product_title"><span>Item 8</span></span> </a>
</div>
</div>
</div>
</div>
</div>
CSS:
.featured_product {
padding-left:10px;
padding-right:10px;
margin-bottom:15px;
}
.featured_products div.padding {
padding:5px 10px;
}
.featured_products div.padding div.border {
border:1px solid #EAEAEA;
}
.featured_products div.padding div.border div.innerpadding {
padding:5px;
text-align:center;
width:100%;
}
.featured_products div.padding div.border div.innerpadding img {
max-height:292px;
display:inline-block;
}
span.featured_product_title {
position: absolute;
bottom:6px;
left: 0;
width: 100%;
background-color:RGBa(255, 255, 255, 0.6);
vertical-align:center;
line-height:50px;
height:50px;
color:#46436f;
font-weight:bold;
font-size:1.3em;
}
解决方案
You can't make all the images as the same size without cutting off.
What you can do is adding the necessary clear fix on the items, for every size you're targeting. That will make the them stay in the correct grid. Bootstrap targets those three breakpoints.
Demo: http://jsfiddle.net/w533z8Lg/5/
@media (min-width: 768px) {
.featured_products .item:nth-child(2n+1) {
clear: both;
}
}
@media (min-width: 992px) {
.featured_products .item:nth-child(2n+1) {
clear: none;
}
.featured_products .item:nth-child(3n+1) {
clear: both;
}
}
@media (min-width: 1200px) {
.featured_products .item:nth-child(3n+1) {
clear: none;
}
.featured_products .item:nth-child(4n+1) {
clear: both;
}
}
这篇关于如何使用 Bootstrap 保留具有不同大小图像的 4 x 2 网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
