title: Change an image when the screen is resized
body: <p>I'm trying to use  in laravel. I hope the image inside the tag changes when the screen becomes 365px, I need the images that use the  tag to have to keep some styles.</p>
  
  <p>Originally my code has:</p>
  
  <pre><code>&lt;img class="bigger" src="{{ URL::asset('Assets/Portal/images/Slide.png') }}" style="width: 100%;"/&gt;
      @if($Permises['s_1'] == 1)
      &lt;div class="contain" style="width: 100%;    margin-top: -5%; display: flexbox; border:none; background-color: rgba(0, 0, 0, 0);"&gt;
              &lt;div class="element element1"&gt;
                  &lt;a href="{{ URL::to('/Review')}}" id="Main" style="color:transparent;"&gt;
                      &lt;img class="d1" height="150" src="{{ URL::asset('Assets/Portal/images/IndexImg/D.png') }}" style="margin-top:0px;  opacity: .5;" width="150"&gt;
                      &lt;/img&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              @if($Cpermises['V_B'] == 1)
              &lt;div class="element element2"&gt;
                  &lt;a href="{{ URL::to('/Bordereau')}}" id="Page1" style="color:transparent;"&gt;
                      &lt;img class="d1" height="150" src="{{ URL::asset('Assets/Portal/images/IndexImg/A.png') }}" style="margin-top:0px; opacity: .5;" width="150"&gt;
                      &lt;/img&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
              @endif
          &lt;/div&gt;
      @else
  </code></pre>
  
  <p>When I want to use <code>&lt;picture&gt;</code>  the image doesn't even appear.</p>
  
  <pre><code>&lt;div style="display:flex; flex-flow: row; justify-content: center; background-color: green; width: 100%; height: 100vh;"&gt;
      &lt;div class="element element2"&gt;
          &lt;picture&gt;
              &lt;source media="(min-width: 965px)" srcset="{{ URL::asset('Assets/Portal/images/responsive/sm/D.png') }}"&gt;
              &lt;source media="(max-width: 365px)" srcset="{{ URL::asset('Assets/Portal/images/responsive/sm/D.png') }}" style="border: none; "&gt;
              &lt;img class="d1" height="150" src="{{ URL::asset('Assets/Portal/images/IndexImg/A.png') }}" style="margin-top:0px;  opacity: .5;" width="150"/&gt;
          &lt;/picture&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is an example of the result I want.</p>
  
  <p><a href="https://i.stack.imgur.com/ffaG8.png" rel="nofollow noreferrer">Click this to see image</a></p>