メディアクエリを使用してクリック可能な画像に<picture>と<srcset>を使用する

これをリンクとして作成し、リンクされたページに画面サイズに基づいて正しい画像ファイルを表示する必要があります。 htmlを追加する前にhtmlが正しいイメージを選択するように働いていました。私が探しているものを達成する方法はありますか？メディアクエリを使用してクリック可能な画像に<picture>と<srcset>を使用する

<picture class="imagesVerticalGallery"> 
<!--small img --> 
<a href="http://sofialeiby.com/update/img/abc/1abcinstall_1200.jpg"> 
<source srcset="http://sofialeiby.com/update/img/abc/1abcinstall_1200.jpg" media="(min-width: 768px)"></a> 

<!--large img --> 
<a href="http://sofialeiby.com/update/img/abc/1abcinstall.jpg"> 
<source srcset="http://sofialeiby.com/update/img/abc/1abcinstall.jpg"></a> 


<!--default large img --> 
<a href="http://sofialeiby.com/update/img/abc/1abcinstall.jpg"> 
<img srcset="http://sofialeiby.com/update/img/abc/1abcinstall.jpg"></a> 
</picture>

my attempt is here, top image

出典

2017-02-27 user3697526

ので画像は理論的にはそうimg srcsetを通じて提示され、そしてこれはを動作しません、あなたは特にIMGの周りにアンカータグを追加する必要があると経由してソースを呼ぶだろうsrcset：

<picture> 
<source srcset="1380.jpg"media="(min-width: 1380px)"> 
<source srcset="990.jpg"media="(min-width: 990px)"> 
<source srcset="640.jpg"media="(min-width: 640px)"> 
<a srcset="320.jpg""> 
<img srcset="320.jpg"> 
</a> 
</picture>

しかし、これはHTML単体としては機能しません。

あなたはこのような何か行うことができます：

<a href="newpage.html"> 
<picture> 
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=1380%C3%97150&w=1380&h=150" media="(min-width: 1380px)"> 
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=900%C3%97150&w=900&h=150" media="(min-width: 990px)"> 
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=650%C3%97150&w=650&h=150" media="(min-width: 640px)"> 
<img srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
</picture> 
</a>

次に新しいページに：

<html> 
<head> 
<meta name="viewport" content="width=device-width; height=device-height;"> 
<style> 
</style> 
<title></title> 
</head> 
<body> 

<picture> 
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=1380%C3%97150&w=1380&h=150" media="(min-width: 1380px)"> 
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=900%C3%97150&w=900&h=150" media="(min-width: 990px)"> 
<source srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=650%C3%97150&w=650&h=150" media="(min-width: 640px)"> 
<img srcset="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
</picture> 

</body> 
</html>

を

出典

2017-02-28 00:51:51

メディアクエリを使用してクリック可能な画像に<picture>と<srcset>を使用する

答えて

関連する問題