如何对齐一组图像？

Question

新的 Web 开发人员和我坚持图像对齐，我试图添加到我的 page.I 添加图像很好，但我希望图像覆盖整个 space 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>

我希望图像覆盖整个蓝色space

Answer 1

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

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

Answer 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>

Answer 3

把你的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>

Answer 4

也许这可以解决您的问题。 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>

Answer 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>

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

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

要填充您所指的蓝色 space，您可能只有以下 img 标签的值。

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

如何对齐一组图像？

how to align group of images?

html

image

bootstrap-4

thumbnails