I'm struggling with optimizing images of varying sizes in bootstrap to ensure they are responsive without losing quality.
Current Image:
https://i.sstatic.net/akoNy.jpg
Desired Image:
https://i.sstatic.net/37VFX.jpg
HTML:
<div class="row">
<?php
$select_stmt=$db->prepare("SELECT * FROM destaques ORDER BY id DESC LIMIT 1;"); //sql select query
$select_stmt->execute();
while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="col-sm-12 col-md-6 col-lg-4" id="destaques_espaco">
<br>
<a style="display:block" href="admin_destaques.php" id="url_sem_linha">
<div id="imagem"><img src="upload/destaques/<?php echo $row['image']; ?>" class="img-fluid" id="imagem_destaque"></div>
<div id="titulo_menu"><?php echo $row['titulo'];?></div>
</a>
<br>
</div>
<?php
}
?>
CSS:
#imagem_destaque{
min-height: 250px;
max-width: 300px;
}
#titulo_menu{
max-width: 300px;
background-color:#C2C23A;
font-weight: bold;
font-size: 20px;
color: white;
line-height: 2;
padding-left: 10px;
}
#titulo_menu:hover{
color: white;
text-decoration:none;
}