как выровнять группу изображений? - PullRequest
Новая
       32

как выровнять группу изображений?

0 голосов
/ 23 сентября 2018

новый веб-разработчик, и я застрял с выравниванием изображений, которое я пытаюсь добавить на свою страницу. Я добавил изображения очень хорошо, но я хочу, чтобы изображения занимали все пространство предыдущего раздела. Меня не волнуетсоотношение сторон, но только выравнивание. 

<!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 голосов
/ 23 сентября 2018 
<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%;
}
0 голосов
/ 23 сентября 2018

Может быть, это решит вашу проблему.Свойство 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>
0 голосов
/ 23 сентября 2018

Поскольку изображения не имеют одинакового соотношения сторон, будет невозможно выровнять их полностью без искажения или обрезки.С искажением можно сделать следующее 

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

0 голосов
/ 23 сентября 2018

измени свой 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>
0 голосов
/ 23 сентября 2018

Вы можете попробовать следующее.Надеюсь на помощь, дружище :)) 

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