Question

我在html中有以下标记 `

<picture>
   <source 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" 
         media="(max-width: 2560px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1920.jpg" 
         media="(max-width: 1920px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1600.jpg" 
         media="(max-width: 1600px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1336.jpg" 
         media="(max-width: 1366px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1200.jpg" 
         media="(max-width: 1200px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_991.jpg" 
         media="(max-width: 991px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_767.jpg" 
         media="(max-width: 767px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_480.jpg" 
         media="(max-width: 480px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_360.jpg" 
         media="(max-width: 360px)">
   <img 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" alt="">
</picture>

`

如果介质设置为max-width，则不显示图像，但设置为min-width时，图像不显示。

有什么建议吗？

Answer 1

如果您反转来源订单，它将起作用，因为它以正确的顺序应用。所以你的最终代码：

+ echo
+ validnum=0-9
+ (( i=1 ))
+ (( i<=5 ))
+ read -p 'Please enter number 1: ' num_1
Please enter number 1:
+ [[ ! 1 =~ [^0-9$] ]]
+ [[ ! 1 == '' ]]
+ echo 'Input numbers have been validated..'
Input numbers have been validated..
+ echo 1
+ (( i++ ))
+ (( i<=5 ))
+ read -p 'Please enter number 2: ' num_2
Please enter number 2:
+ [[ ! 2 =~ [^0-9$] ]]
+ [[ ! 2 == '' ]]
+ echo 'Input numbers have been validated..'
Input numbers have been validated..
+ echo 2
+ (( i++ ))
+ (( i<=5 ))
+ read -p 'Please enter number 3: ' num_3
Please enter number 3:
+ [[ ! 3 =~ [^0-9$] ]]
+ [[ ! 3 == '' ]]
+ echo 'Input numbers have been validated..'
Input numbers have been validated..
+ echo 3
+ (( i++ ))
+ (( i<=5 ))
+ read -p 'Please enter number 4: ' num_4
Please enter number 4:
+ [[ ! 4 =~ [^0-9$] ]]
+ [[ ! 4 == '' ]]
+ echo 'Input numbers have been validated..'
Input numbers have been validated..
+ echo 4
+ (( i++ ))
+ (( i<=5 ))
+ read -p 'Please enter number 5: ' num_5
Please enter number 5:
+ [[ ! 5 =~ [^0-9$] ]]
+ [[ ! 5 == '' ]]
+ echo 'Input numbers have been validated..'
Input numbers have been validated..
+ echo 5
+ (( i++ ))
+ (( i<=5 ))
+ echo 'Sorting values..'
Sorting values..
+ echo 'Below are the sorted values'
Below are the sorted values
++ cat save.txt
++ sort -n
+ echo 1 2 3 4 5
1 2 3 4 5

如果您想应用其他媒体，例如min-device-pixel-ratio作为评论请求，您可以添加它没问题：

<picture>
   <source 
         srcset="img/home-page/placeholders/placeholder_360.jpg" 
         media="(max-width: 360px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_480.jpg" 
         media="(max-width: 480px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_767.jpg" 
         media="(max-width: 767px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_991.jpg" 
         media="(max-width: 991px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1200.jpg" 
         media="(max-width: 1200px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1336.jpg" 
         media="(max-width: 1366px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1600.jpg" 
         media="(max-width: 1600px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1920.jpg" 
         media="(max-width: 1920px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" 
         media="(max-width: 2560px)">
   <img 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" alt="">
</picture>

或

   <source 
         srcset="img/home-page/placeholders/placeholder_2560-3.jpg" 
         media="(max-width: 2560px) and (min-device-pixel-ratio: 3)">

Srcset属性 - 最大宽度问题

1 个答案: