如何对齐图像组？

时间：2018-09-23 11:13:23

标签： html image bootstrap-4 thumbnails

新的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>

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

1

5 个答案:

答案 0 :(得分：2)

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

答案 1 :(得分：1)

由于图像的纵横比不相等，因此无法完全对齐图像而不会失真或裁剪。通过失真，可以完成以下操作

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

enter image description here

答案 2 :(得分：1)

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

答案 3 :(得分：0)

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

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

答案 4 :(得分：0)

<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%;
}
相关问题
最新问题