#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;
}
Комментарии:
1. Да, однако я хочу, чтобы он был маленьким. В таком случае есть ли способ уменьшить их размер из внешних элементов?
Ответ №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>