モバイルモードで別の画像サイズを設定する方法

Question

私のサイトの画像サイズはデスクトップ用には完全に設定されていますが、モバイルモードでは、ブートストラップを使用しても表示サイズが変動しても反応しません。モバイルモードでは？ googleマップに関するテンプレートと同じ質問。私はメディアクエリを設定しようとしましたが、うまくいきませんでした。

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

は、ブートストラップ4では、あなたが応答サイズを変更したい任意の画像にimg-fluid classを追加する必要があります。

（ブートストラップ3では、代わりにimg-responsiveを使用しています。）