I have a picture on my page

<div class="title-image">
     <img src="{{ $article->mainImage }}">
</div>

And let's say my mobile version starts when the screen size is less than 768px

And there should already be such a picture

<div class="title-image">
     <img src="{{ $article->mainImageMobile }}">
</div>

Is it possible to do this right here on the page so that the picture changes depending on the screen? Or do you just need to include css?

CodePudding user response：

You must already have different image sizes for this HTML.

<img srcset="{{ $article->mainImageMobile }} 120w,
             {{ $article->mainImage }} 278w"
     sizes="(max-width: 710px) 120px,
            278px">

srcset is the set of images. Use unit in w.
sizes is set of media conditions.

Read more on MDN, W3Schools.

CodePudding user response：

you can achive this using css by playing with display block and none depending on the device size

HTML:

<div class="title-image">
     <img class="laptop" src="{{ $article->mainImage }}">
    <img class="mobile" src="{{ $article->mainImageMobile }}">

</div>

css:

.mobile{
  display:none;
}

@media only screen 
  and (max-width: 768px)
  {
    
    .laptop{
      display:none !important;
    }
    
    .mobile{
      display:block !important;
    }

}