Question

我有下表显示产品图片。在桌面视图中，我想显示图像的原始大小，在移动版本中，我想显示180px并将其居中。

代码如下：

<h2><?php echo $product->product_name; ?></h2>
<div class="panel panel-default">
  <div class="panel-body">
    <table class="table">
        <tr><th></th><td ><img id="myImage" src="<?php echo CRM_URL; ?>img/product_images/<?php echo $product->product_image; ?>"  /></td></tr>
        <tr><th>Model Number</th><td><?php echo $product->product_model_number; ?></td></tr>
        <tr><th>Category</th><td><?php echo $product->category; ?></td></tr>
        <tr><th>Brand</th><td><?php echo $product->product_brand; ?></td></tr>
        <tr><th>Price</th><td><?php echo $price; ?></td></tr>
        <tr><td colspan="2"><?php echo $cartForm; ?></td></tr>            
    </table>
    </div>
</div>

和CSS代码：

@media(min-width: 320px) {
    .product_search_textbox {
        width: 100px;
    }
    #header div.topbar{
        height: 150px;
    }
    .homepage-slider-content{
        margin-top:18px;
    }

    #myImage { 
        width: 180px; 
    }  
}

我仍然无法在移动视图中更改图片，有人可以帮助我吗？我做错了什么？

Answer 1

首先，它应该是(max-width: 320px)，因为当宽度减少到320px以下时，您希望移动CSS接管。此外，space和@media之间必须有(max-width: 320px)，如下所示：

@media (max-width: 320px) {
    .product_search_textbox {
        width: 100px;
    }
    #header div.topbar{
        height: 150px;
    }
   .homepage-slider-content{
    margin-top:18px;
    }

   #myImage { 
    width: 180px; 
    }  
}

桌面和移动设备中的图像大小不同

1 个答案: