Question

所以我的网站图片大小完全适合桌面，但在移动模式下他们没有响应，即使我使用bootstrap他们超过浮动显示大小。如何在移动模式下设置不同的图像大小？关于谷歌地图模板的同样问题。我试图设置媒体查询，但它不起作用。

我的CSS：

@media(max-width: 400px) {
    #himage{width:200px;}
}

这是我的代码：

@extends ('master') 

@section('content') 

<div class="row" id="promotions"> 
    <div class="col-md-12" style="margin-bottom: 40px; ">
        <h1 style="text-shadow: 0 2px 5px rgba(0,0,0,.9);color:white; font-weight: bold;">News feed</h1><br>  
        <h3 style="text-shadow: 0 2px 5px rgba(0,0,0,.9);color:white; font-weight: bold;">This month promotion:</h3><br> 
        <p class="homeintro ">Set of Rick & Morty Pop! figures for 30.00$ only!For details visit our <a class="shopp" href="{{ url('shop')}} " style="text-decoration: none;">Shop</a>. </p> <br> 
        <div class="col-md-6" id="himage" >  
            <img src="{{ asset('images/rc.jpg')}}" width="500" > 
        </div> 
        <div class="col-md-6" style="margin-bottom:15px" id="himage" >  
            <img src="{{ asset('images/mr.jpg')}}" width="500"> 
        </div> <br> <br><br>
        <div class="col-md-6 col-sm-6" style="margin:10px;" id="himage"> 
            <p class="homeintro "> Rick & Morty posters for 15.00$ only! </p> <br>
        </div>
        <div class="col-md-6 col-sm-12" style="margin-bottom:20px;" id="himage" >  
            <img src="{{ asset('images/rmpos.jpg')}}" width="500" > 
        </div> 
        <div class="col-md-6 col-sm-12" style="margin-bottom:20px;" id="himage">  
            <img src="{{ asset('images/rmpos2.jpg')}}" width="500"> 
        </div> <br><br>
        <div class="col-md-6 col-sm-6" style="margin:10px;" id="himage"> 
            <h3 style="text-shadow: 0 2px 5px rgba(0,0,0,.9);color:white; font-weight: bold;"> Soon in our store. </h3> <br><br>
            <p class="homeintro ">Spider-Man Homecoming action figures!  </a>. </p> <br><br>
        </div>
        <div class="col-md-6 col-sm-12" style="margin-bottom:20px;" id="himage">  
            <img src="{{ asset('images/sphome3.jpg')}}" width="500" > 
        </div> 
        <div class="col-md-6 col-sm-12" style="margin-bottom:20px;"id="himage" >  
            <img src="{{ asset('images/sphome.jpg')}}" width="500"> 
        </div>
    </div>  
</div>


@endsection

Answer 1

在Bootstrap 4中，您应该将img-fluid class添加到您想要响应的大小调整的图像中。

（在Bootstrap 3中，改为使用img-responsive。）

如何在移动模式下设置不同的图像大小

1 个答案: