html5のpictureタグにリンクをつけるときどのタグを囲うべきでしょうか？

以下のpictureタグのコードを使って画面の横幅によって表示する画像を切り替えたいのですが、タグ内の画像にリンクをつけるときどう囲ってリンクを追加するべきでしょうか？

<picture>
     <source media="(max-width:640px)" srcset="https://wonect.com/media/wysiwyg/top/category/top_cate_leisure_sp.jpg 640w" sizes="100vw" />
     <source srcset="https://wonect.com/media/wysiwyg/top/category/top_cate_leisure_sp.jpg 640w,
                  https://wonect.com/media/wysiwyg/top/category/top_cate_leisure_pc.jpg 1280w" sizes="(max-width:1366px) 100vw,
                    1280px" />
     <img alt="" src="https://wonect.com/media/wysiwyg/top/category/top_cate_leisure_pc.jpg" />
</picture>

行動規範の内容に同意します

回答1件

ベストアンサー

pictureタグはaタグを子要素にもつことを許可していないので、pictureタグ自体をaタグで囲んでしまえば良いのではないかと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6</head>
7<body>
8<a href="#">
9    <picture>
10        <source media="(max-width:640px)"
11                srcset="https://wonect.com/media/wysiwyg/top/category/top_cate_leisure_sp.jpg 640w" sizes="100vw">
12        <source srcset="https://wonect.com/media/wysiwyg/top/category/top_cate_leisure_sp.jpg 640w,
13                  https://wonect.com/media/wysiwyg/top/category/top_cate_leisure_pc.jpg 1280w" sizes="(max-width:1366px) 100vw,
14                    1280px">
15        <img alt="" src="https://wonect.com/media/wysiwyg/top/category/top_cate_leisure_pc.jpg">
16    </picture>
17</a>
18</body>
19</html>