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

【问题标题】：How to set different image size when in mobile mode在移动模式下如何设置不同的图像大小
【发布时间】：2018-02-15 05:49:55
【问题描述】：

所以我的网站图像尺寸非常适合桌面，但是在移动模式下，即使我使用引导程序，它们也没有响应，它们会浮动显示尺寸。在移动模式下如何设置不同的图像尺寸？关于谷歌地图模板的同样问题。我尝试设置媒体查询，但没有奏效。

我的 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

【问题讨论】：

您不能拥有超过 1 个具有相同 ID 的元素。 developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
您设置的是 div 的宽度而不是图像，并且不能有多个具有相同 ID 的元素
@Bourne96 是的，谢谢你成功了。谷歌模板地图怎么样，它不是图像，我该如何修复大小？
我们是在谈论 iframe，只针对 iframe 并更改它的宽度和高度
不要对所有图像使用相同的 id 并为图像设置max-width:100%，以便图像将在移动视图中设置。

标签： css twitter-bootstrap laravel media-queries

【解决方案1】：

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

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

【讨论】：