带有：target

Question

我需要通过url目标更改图像的大小。使用CSS很简单。

img{
    width: 100px;
}

img:target {
    width: 300px;
}

html

<img id="image"
     sizes="100px"
     srcset="https://via.placeholder.com/100.png 100w, https://via.placeholder.com/300.png 300w">

但是我也想从srcset加载更高质量的图像。所以我想在图像未定位时使用100px源，在图像未定位时使用300px源。

这是我的问题。我怎样才能做到这一点？我需要类似sizes="(:target) 300px, 100px"的东西。是否有纯CSS + HTML解决方案？

我在代码笔https://codepen.io/martindybal/pen/oVaZYJ?editors=1100上准备了样本