미디어 쿼리를 사용하는 클릭 가능한 이미지에 <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>

그래서 이미지가 너무 이론적으로 img srcset를 통해 제공됩니다

my attempt is here, top image

출처

2017-02-27 user3697526

및 이 작동하지 않습니다, 당신은 특히 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>을 사용하십시오.

답변

관련 문제