使用<picture>和<srcset>作爲使用媒體查詢的可點擊圖片

我需要能夠將其作爲鏈接並使後續鏈接頁面根據屏幕大小顯示正確的圖片文件。在我添加href之前，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>作爲使用媒體查詢的可點擊圖片

回答

相關問題