Question

在使用bootstrap 3时，我很难理解一些图像的情况，所以希望有人可以解释。

我有以下标记来设置一些图像

                <div class="row footer-media">
            <div class="col-sm-6">
                <h5>Recent Videos</h5>
            </div>
            <div class="col-sm-6">
                <div class="title">
                    <h5>@hallOfFame.GetPropertyValue("pageHeading")</h5>
                </div>
                @if (hallOfFame.HasValue("hallOfFameGallery"))
                {
                    foreach (var image in hofMediaFolder.Children)
                    {
                        <div class="col-xs-6 col-sm-4 hof-images">
                            <img class="img-responsive" src="@image.Url" alt="@image.Name" title="@image.Name" />
                        </div>

                    }
                }
            </div>
        </div>

结果如下

为什么第二行的第一张图像的高度高于其他所有图像？图像与其他图像完全相同（640x480）

如何确保所有图像（无论其尺寸如何）缩放到相同尺寸，正确排列并在断点发生变化时适当调整大小？ bootstrap是否提供了一个特殊的类来实现这一点，或者我可以使用哪些东西？

由于

编辑* 我现在已经创建了一个小提示来显示我的问题，可以在这里查看https://jsfiddle.net/muncher39/um04cwmp/1/。小提琴中使用的图像与我在我的网站上使用的图像完全相同。事实证明，图像尺寸并不完全相同，但我仍然不确定为什么这应该是一个问题？

图像尺寸如下

1.image5.jpg = 640x480
2.image7.jpg = 640x480
3.image1.jpg = 640x480
4.image2.jpg = 640x480
5.image4.jpg = 3888x2592
6.image6.jpg = 1944x1296
7.image3.jpg = 1944x1296

Answer 1

将它们放入包装div（每个图像一个包装div），并将它们设置为各个图像div的背景封面 - 对齐的中心，中心。将溢出设置为隐藏在图像容器div上。将图像容器的大小设置为宽度：100％，将高度设置为固定量。如果图像的宽高比不正确，图像将被剪裁在边缘 - 但它们将始终占据一致的高度。宽度将由列宽控制，并且在调整窗口大小时它们不会倾斜。

由于您希望它是动态的 - 您只需要通过JS / jQuery设置图像路径（以及一些css），如图所示。

<强> HTML

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div> 
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div> 
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div>  
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div> 
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div> 
        <div class="col-xs-6 col-md-4 hof-images">
            <div class="image"></div>
        </div> 
    </div>
</div>

<强> CSS

.image {
    margin-bottom:30px;
    height:250px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
     background-attachment: fixed;
}

<强> JS

$('.image').eq(0).css("background", "url(http://placehold.it/450x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");
$('.image').eq(1).css("background", "url(http://placehold.it/550x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");
$('.image').eq(2).css("background", "url(http://placehold.it/450x450)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");
$('.image').eq(3).css("background", "url(http://placehold.it/450x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");
$('.image').eq(4).css("background", "url(http://placehold.it/650x350)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");
$('.image').eq(5).css("background", "url(http://placehold.it/450x450)").css("backgroundRepeat", "no-repeat").css("backgroundPosition", "center center");

Fiddle

Bootstrap响应高度问题

1 个答案:

Bootstrap响应高​​度问题

1 个答案:

Bootstrap响应高度问题