时间戳

首页 > 解决方案 > php/mysql 响应式成像

php - php/mysql 响应式成像

问题描述

我正在尝试制作一个响应式 php/mysql 图像系统。我从互联网上获取了此代码：

<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>

这表明了这一点：img

并尝试使用 mysql 和 php 使其响应。所以我可以添加图像。

<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>

但它看起来像这样：在此处输入图像描述

Ordine 行是 1,2,3,4,5,6 等。

任何想法我做错了什么？

我真的没有想法

标签： phpcssresponsive

解决方案

请使用 boostrap class="img-responsive" 并在 img 标签中添加高度和宽度

例子 ：

 <img src="images/menu-5.jpg" class="img-responsive"  width="304" height="236">

推荐阅读