使用媒体查询将 <picture> 和 <srcset> 用于可点击图像答案

【问题标题】：Using <picture> and <srcset> for clickable images using media queries使用媒体查询将 <picture> 和 <srcset> 用于可点击图像
【发布时间】：2017-02-27 23:46:58
【问题描述】：

我需要能够将此作为链接并让后续链接页面根据屏幕尺寸显示正确的图像文件。在我添加 a href 之前，html 正在努力选择正确的图像。有没有办法完成我正在寻找的东西？

<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

【问题讨论】：

标签： html image target srcset

【解决方案1】：

所以图像是通过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>

【讨论】：