调整屏幕大小时更改图像答案

【问题标题】：Change an image when the screen is resized调整屏幕大小时更改图像
【发布时间】：2019-12-31 12:24:43
【问题描述】：

我正在尝试在 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

【问题讨论】：

Laravel 是一个 PHP 框架，与 CSS 规则关系不大。

标签： html css responsive

【解决方案1】：

您需要在 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')
  }
}

【讨论】：