Попытка сделать мои карточки с изображениями или как вы их называете отзывчивыми. Мне нужно 4 карты, чтобы быть рядом друг с другом, а потом все начнется снова. Я могу заставить его работать, только если я использую изображения, которые не из базы данных, как только я пытаюсь сделать это из базы данных, изображение просто накладывается друг на друга.
(Это то, что происходит, когда пользовательзагружает изображение, и изображения отображаются на сайте. Они просто накладываются друг на друга, используя тег img, они становятся отзывчивыми) https://gyazo.com/39920fdceb0626517f49b3c0b9a3732d https://gyazo.com/234c1098959408087906700a2bda0c58
Я пробовал несколько вещей из этогосайт и другие сайты, но ничего не работает или даже не близко к тому, что я делаю.
<div class="container">
<div class="row">
<div class="card-deck">
<div class="card">
<div class="image-fluid gallery-container">
<?php
include_once '.../...';
$sql = "SELECT * FROM ... ORDER BY ... DESC";
$stmt = mysqli_stmt_init($conn);
if (!mysqli_stmt_prepare($stmt, $sql)) {
echo "SQL statement failed!";
} else {
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while ($row = mysqli_fetch_assoc($result)) {
echo '
<a href="#">
<div class="card-img-top img-responsive img-thumbnail" style="background-
image: url(img/gallery/' . $row["imgFullNameGallery"] . ');"></div>
<div class="card-body">
<h5 class="card-title">' . $row["titleGallery"] . '</h5>
<p class="card-text">' . $row["descGallery"] . '</p>
</div>
</a>';
}
}
?>
</div>
</div>
</div>
</div>
</div>
css
.card-deck {
margin: 0 -15px;
justify-content: space-between;
}
.card-deck .card {
margin: 0 0 1rem;
}
@media (min-width: 576px) and (max-width: 767.98px) {
.card-deck .card {
-ms-flex: 0 0 48.7%;
flex: 0 0 48.7%;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.card-deck .card {
-ms-flex: 0 0 32%;
flex: 0 0 32%;
}
}
@media (min-width: 992px)
{
.card-deck .card {
-ms-flex: 0 0 24%;
flex: 0 0 24%;
}
}