如何对齐图像组？答案

【问题标题】：how to align group of images?如何对齐图像组？
【发布时间】：2019-02-27 03:39:24
【问题描述】：

新的 Web 开发人员，我一直在尝试添加到我的页面的图像对齐。我添加的图像很好，但我希望图像覆盖前一个 div 的整个空间，我不关心纵横比，但仅对齐。

<!DOCTYPE html>
<html>
<head>
    <title>test file</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                    <img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail">
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                <img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail">
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                <img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail">
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                <img src="images/" class="img-thumbnail imgL">
                </a>
            </div>

        </div>
    </div>

</body>
</html>

我希望图像覆盖整个蓝色空间

【问题讨论】：

方法如下：codepen.io/vsync/pen/DpmnK

标签： html image bootstrap-4 thumbnails

【解决方案1】：

把你的 HTML 改成这个。

<!DOCTYPE html>
<html>
<head>
    <title>test file</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<style>
.full_height {
    height: 250px;
}
</style>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                    <img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail full_height">
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                <img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail full_height">
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                <img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail full_height">
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                <img src="images/" class="img-thumbnail imgL">
                </a>
            </div>

        </div>
    </div>

</body>
</html>

【讨论】：

它对齐图像，但它也向下扩展了很多，它增加了前一个 div 的大小（我在我的问题中提到的蓝色矩形）
所以，只需将height:100%; 更改为height:250px;。我也更新了上面的代码。
谢谢你的工作非常好，但你能解释一下为什么这个百分比会这样吗？
因为它试图使用整个高度。

【解决方案2】：

由于图像的纵横比不相等，因此无法在不失真或裁剪的情况下完全对齐它们。有了失真，可以做到以下几点

<!DOCTYPE html>
<html >
<head>
    <title>test file</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <a href="#">
                        <img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg"class="img-thumbnail" style="height: 180px; width: 100%">
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="#">
                    <img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail" style="height: 180px; width: 100%">
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="#">
                    <img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail" style="height: 180px; width: 100%">
                    </a>
                </div>
                <div class="col-lg-4 col-sm-6">
                    <a href="#">
                    <img src="images/" class="img-thumbnail imgL">
                    </a>
                </div>

            </div>
        </div>

    </body>
    </html>

【讨论】：

对我来说，我做到了。在我的答案中附上屏幕截图。图像确实会失真，但它们是对齐的
那是之前的回答，对不起，它现在肯定有效，您能否解释一下为什么百分比没有按预期工作。
百分比事情是将图像扩展为原始图像的完整像素值，这比要显示的要大得多

【解决方案3】：

也许这可以解决您的问题。 object-fit 属性用于指定如何调整 img 的大小以适合其容器 (https://www.w3schools.com/css/css3_object-fit.asp)

<!DOCTYPE html>
<html>
<head>
    <title>test file</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>

<style>
.fixHeight{

    height: 100%;
    width: 100%;
    object-fit: cover;
}
</style>

<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                    <img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail fixHeight">
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                <img src="https://cdn.pixabay.com/photo/2014/06/11/17/00/cook-366875_960_720.jpg" class="img-thumbnail fixHeight">
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                <img src="https://cdn.pixabay.com/photo/2016/06/25/12/48/go-pro-1478810_960_720.jpg" class="img-thumbnail fixHeight">
                </a>
            </div>
            <div class="col-lg-4 col-sm-6">
                <a href="#">
                <img src="images/" class="img-thumbnail imgL">
                </a>
            </div>

        </div>
    </div>

</body>
</html>

【讨论】：

非常感谢，就像魅力一样，正是我想要的

【解决方案4】：

您可以尝试以下方法。希望能帮到你，我的朋友:))

<style>
    .img-thumbnail {    
        height: 100%;
}
</style

【讨论】：

它对齐了图像，但没有按预期工作，因为它进一步拉伸了 div 的大小（蓝色矩形）
@Nnnnn：你的意思是你只想调整第一张图片的大小，对吧？

【解决方案5】：

<div class="col-lg-4 col-sm-6 img-holder">
   <a href="#">
     <img src="https://cdn.pixabay.com/photo/2016/03/23/12/53/clock-1274699_960_720.jpg" class="img-thumbnail">
   </a>
</div>

基于您的初始代码。您可以只添加一个类，例如具有以下值的 .img-holder：

.img-holder {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    height: 250px;
}

要填充您所指的蓝色空间，您可能只需为 img 标签设置以下值。

.img-thumbnail {
   max-height: 100%;
}

【讨论】：