调整屏幕大小时更改图像

我正在尝试在laravel中使用。我希望标签内的图像在屏幕变为365px时发生变化，我需要使用标签的图像必须保留一些样式。调整屏幕大小时更改图像

最初我的代码有：

<img class="bigger" src="{{ URL::asset('Assets/Portal/images/Slide.png') }}" style="width: 100%;"/> 
    @if($Permises['s_1'] == 1) 
    <div class="contain" style="width: 100%; margin-top: -5%; display: flexbox; border:none; background-color: rgba(0, 0, 0, 0);"> 
      <div class="element element1"> 
       <a href="{{ URL::to('/Review')}}" id="Main" style="color:transparent;"> 
        <img class="d1" height="150" src="{{ URL::asset('Assets/Portal/images/IndexImg/D.png') }}" style="margin-top:0px; opacity: .5;" width="150"> 
        </img> 
       </a> 
      </div> 
      @if($Cpermises['V_B'] == 1) 
      <div class="element element2"> 
       <a href="{{ URL::to('/Bordereau')}}" id="Page1" style="color:transparent;"> 
        <img class="d1" height="150" src="{{ URL::asset('Assets/Portal/images/IndexImg/A.png') }}" style="margin-top:0px; opacity: .5;" width="150"> 
        </img> 
       </a> 
      </div> 
      @endif 
     </div> 
    @else

当我想用<picture>图像也不出现。

<div style="display:flex; flex-flow: row; justify-content: center; background-color: green; width: 100%; height: 100vh;"> 
    <div class="element element2"> 
     <picture> 
      <source media="(min-width: 965px)" srcset="{{ URL::asset('Assets/Portal/images/responsive/sm/D.png') }}"> 
      <source media="(max-width: 365px)" srcset="{{ URL::asset('Assets/Portal/images/responsive/sm/D.png') }}" style="border: none; "> 
      <img class="d1" height="150" src="{{ URL::asset('Assets/Portal/images/IndexImg/A.png') }}" style="margin-top:0px; opacity: .5;" width="150"/> 
     </picture> 
    </div> 
</div>

这是我想要的结果的一个例子。

Click this to see image

谁能帮助？

来源

2017-08-03 Mariyselita

Laravel是一个PHP框架，与CSS规则无关。 – Devon

你需要在你的CSS中使用媒体查询。

@media screen and (min-width: 365px) and (max-width: 965px) { 
    .d1 { 
    background-image: url('Assets/Portal/images/responsive/sm/A.png') 
    } 
} 
@media screen and (min-width: 965px) { 
    .d1 { 
    background-image: url('Assets/Portal/images/responsive/sm/B.png') 
    } 
}

来源

2017-08-04 00:02:52

调整屏幕大小时更改图像

回答

相关问题