根据屏幕大小更改图片

Question

我的页面上有一张图片

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

假设我的移动版本在屏幕尺寸小于 768px 时启动

而且应该已经有这样的图了

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

是否可以在页面的此处执行此操作，以便图片根据屏幕而变化？ 还是只需要包含 css？

Answer 1

您必须已经为此 HTML 拥有不同的图像尺寸。

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

srcset是图像集。 在w中使用单位。
sizes是一组媒体条件。

阅读有关MDN 、 W3Schools的更多信息。

Answer 2

您可以使用 css 来实现这一点，方法是使用显示块而不是取决于设备大小

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;
    }

}