Мой элемент div занимает больше места, чем требуется. Как я могу избавиться от этого пространства?

ProgramBox

Мой элемент div занимает больше места, чем требуется. Как я могу избавиться от этого пространства?

Post author:admin
Запись опубликована:3 февраля, 2023
Post category:Вопросы по программированию

#html #css #image #bootstrap-4

#HTML #css #изображение #bootstrap-4

Вопрос:

Я пытаюсь центрировать изображения и выровнять текст по его левому краю.

Я подумал, что лучше всего иметь div с. width: fit-content Однако вот что-то интересное, что я получаю и не могу решить.

Вот мой код:

HTML-код:

 <div class="container">
            <div class="row">
                <div class="column">
                    <div id="imageContainer">
                        <img id="imgWidth" src="{%  static 'kuzaneli/img/New folder/12.png' %}" alt="..."/>
                        <div id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div></div>
                    </div>
                </div>
                <div class="column">
                    <div id="imageContainer">
                        <img id="imgWidth" src="{%  static 'kuzaneli/img/New folder/li.png' %}" alt="..."/>
                        <div id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div></div>
                    </div>
                </div>
            </div>
</div>

Код CSS:

 .row{
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    align-items: center;
}

.column{
    flex: 50%;

}

#imageContainer{

}


#imageContainer{
    width: fit-content !important;
}

#imgWidth{
    width: 70%;
    height: auto;
}

#imageText{
    width: fit-content;
}

Я хочу избавиться от лишнего пространства, которое у меня есть в div, где у меня есть изображение и текст. Как я могу это сделать?

Ответ №1:

вместо этого вы можете создать содержимое, чтобы заполнить доступное пространство. в этом случае пусть изображение заполнит все доступное пространство.

 #imgWidth{
    width: 100%;
    height: auto;
}

Ответ №2:

когда вы используете bootstrap, лучше использовать его классы для компоновки вашего документа. В приведенном ниже коде я разместил html и css, которые я использовал. В тегах html я использовал классы начальной загрузки для того, чтобы сделать тег img «отзывчивым» и выровнять тексты и изображения. ссылка ниже из документации bootstrap может быть полезной: https://getbootstrap.com/docs/4.4/content/images /

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

в коде css я добавил «max-width = 168px» в соответствии с моим размером изображения, вы можете изменить его на любую ширину вашего изображения.

 .imageContainer {
  border: 2px solid #258221;
  max-width : 168px;
}

 <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>center-img</title>

  <!-- links -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
            <div class="row">
               <div class="col-sm text-center">
                    <div class="imageContainer" class="text-left">
                        <img class="img-fluid" src="img/birds.jpg"/>
                        <div class="text-left">
                          <div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm text-center">
                    <div class="imageContainer" class="text-left">
                        <img class="img-fluid" src="img/view.jpg"/>
                        <div class="text-left" id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
                        </div>
                    </div>
                </div>

            </div>
</div>

  <script src="js-files/jquery-3.5.1.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>

</body>
</html>

вам нужно добавить исходники изображения и загрузчик, чтобы сделать его функциональным. введите описание изображения здесь

1. Как я могу уменьшить столбец? Все мои изображения имеют фиксированный размер, поэтому у меня нет проблем с этим. Мне просто нужно, чтобы они не выглядели большими, есть ли возможность сделать столбец меньшего размера, чем изображение, и заполнить его изображением

2. Я добавил класс «col-sm» для лучшего отображения. если вам это не нужно, вы можете только удалить их и использовать только «.imageContainer» div в вашем макете.

3. Этот ответ не совсем решил мою проблему, однако он дал мне достаточно информации, чтобы исправить ее. Я изменил ваш код и добавил некоторые дополнения, которые в конечном итоге уменьшили размеры.

Ответ №3:

это код

 <div class="container">
            <div class="row">
              <!--  <div class="col-sm text-center"> -->
                    <div class="imageContainer" class="text-left">
                        <img class="img-fluid" src="img/birds.jpg"/>
                        <div class="text-left">
                          <div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
                        </div>
                    </div>
             <!--    </div> -->

               <!--  <div class="col-sm text-center"> -->
                    <div class="imageContainer" class="text-left">
                        <img class="img-fluid" src="img/view.jpg"/>
                        <div class="text-left" id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div>
                        </div>
                    </div>
              <!--   </div> -->

            </div>
</div>