如何下载图片仅适用于移动版本的网站？

-1

在我的网站的移动版本中，我有另一张主要配方的图片，大小= 70KB，并且我希望下载的图像仅用于移动版本，该怎么做？我做了这个解决方案，也许有人有更好的解决方案？ SCR 60B像素进行验证ALT =按住Alt + 255如何下载图片仅适用于移动版本的网站？

https://satoriq.github.io/Lemon-Recipes/上门检查下载

<picture> 
     <source media="(max-width: 425px)" 
      srcset="img/main-recipe-mobile.jpg"> 
     <img class="main-recipe__mobile" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt=" "> 
</picture>

来源

2017-11-25 Andrew Satori

您可以使用srcset大小属性。 –

既然你不使用JavaScript我认为最好的办法是这样的：

<style> 
    .desktop {display: block;} 
    .mobile {display: none;} 
    @media (max-width: 425px) { 
    .desktop {display: none;} 
    .mobile {display: block;} 
    } 
</style> 
<figure> 
    <figcaption>FIGURE CAPTION TEXT</figcaption> 
    <img class="desktop" src="desktop.jpg" alt="alternative text for desktop" /> 
    <img class="mobile" src="mobile.jpg" alt="alternative text for mobile" /> 
</figure>

PS：为了添加推荐的无花果图，我将图片标签更改为图形。如果您愿意，可以将其更改回图片。

好运和你可以阅读更多有关媒体查询的位置： https://www.w3.org/TR/css3-mediaqueries/

来源

2017-11-25 18:54:32

如何下载图片仅适用于移动版本的网站？

回答

相关问题