Question

我需要能够将其作为链接，让后续链接页面根据屏幕大小显示正确的图像文件。在添加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

Answer 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>

使用<picture>和<srcset>使用媒体查询进行可点击的图像

1 个答案: