php/mysql responsive imaging - php

Question

I'm trying to make a responsive php/mysql image system.
I took this Code from the internet:
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="item-container">
<a href="#">
<div class="item-caption">
<div class="item-caption-inner">
<div class="item-caption-inner1">
<h3>$45</h3>
<span>Only</span>
</div>
</div>
</div>
<img src="images/menu-1.jpg" />
</a>
</div>
<div class="item-container">
<a href="#">
<div class="item-caption">
<div class="item-caption-inner">
<div class="item-caption-inner1">
<h3>$45</h3>
<span>Only</span>
</div>
</div>
</div>
<img src="images/menu-5.jpg" />
</a>
</div>
</div>
</div>
Which is showing this: img
and tried to make it responsive with mysql and php. So I can add the images.
<div class="row">
<?php
if ($result->num_rows > 0)
{
while($row = $result->fetch_assoc()) {
if($row['Ordine'] %2 != 0)
{
echo "<div class='col-lg-3 col-md-3 col-sm-6 col-xs-12'>";
}
echo "
<div class='item-container'>
<a href='#'>
<div class='item-caption'>
<div class='item-caption-inner'>
<div class='item-caption-inner1'>
<h3>$45</h3>
<span>Only</span>
</div>
</div>
</div>
<img src='/dulcearoma/admin/images/" . $row["Poza"]. "' />
</a>
</div>";
if($row['Ordine'] %2 != 0)
{
echo "</div>";
}
}
}
?>
</div>
but it's looking like this: enter image description here
The Ordine row is 1,2,3,4,5,6 etc.
Any ideas what I did wrong?
I'm really out of ideas

Answer 1

please use boostrap class="img-responsive" and add height and width in img tag
example :
<img src="images/menu-5.jpg" class="img-responsive" width="304" height="236">