css - img div 无法在移动设备上运行

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 类。 container-fluid 根据 Bootstrap CSS ( here ) 具有以下 CSS:

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