Question

这个代码在桌面上运行时看起来不错，但我只想在移动设备上显示一个img。我只看到class="imgprice"产品文字，以及一个非常非常小的img：

<div class="col-xs-12 col-sm-10 col-sm-offset-1">
    <p class="text-center">Here our products.</p>
    <?php    
    if(is_array($udvalg)) {    
        foreach($udvalg as $vare)
        {    
            echo '      <div class="col-xs-12 col-md-3">';    
            echo '        <span class="thumbnail">';
            echo '<div class="imgprice">'.$vare->varenavn.'</div>';
            if ($vare->varefoto) {
                echo '            <img class="img-responsive" src="img/uploads/vare_foto/'.$vare->varefoto.'" alt="'.$vare->varenavn.'">';
            } else {    
                echo '<img class="img-responsive" src="img/uploads/vare_foto/polser.cb23b1.jpg" alt="'.$vare->varenavn.'">';
            }    
            echo '        </span>';    
            echo '      </div>';
        }}        
    ?>
</div>

我想要桌面上有一排图像，手机上有1 x 100％宽度的图像吗？

Answer 1

如果您可以使用自定义CSS，如果您知道移动屏幕的宽度/图像宽度，则可以使用CSS @media标记来实现此目的，如下所示：

@media(max-width={...}) { /* Replace ellipsis with your size */
    img {
        width: 100%;
        margin: 0 auto;
    }
}

或者，如果您使用container-fluid版本的Bootstrap，则可以尝试为图片提供container-fluid课程。根据Bootstrap CSS（here），container-fluid上面有以下CSS：

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

img div不在移动设备上工作

1 个答案: