Html 仅当图片标签具有高分辨率时才显示较大的图像

我正在使用一个Jekyll插件，它可以为浏览器提供多种图像分辨率；问题是，并不是我所有的图像都具有相同的分辨率，所以我希望分辨率较低的照片显示得更小，而不是放大

因此，如果我的代码是针对一幅图像的：

<picture>
<source srcset="/assets/generated/images/recipes/D5C33AEE-2F3D-48EC-BF62-0873E4525AA2-400-cb7621278.webp 400w, /assets/generated/images/recipes/D5C33AEE-2F3D-48EC-BF62-0873E4525AA2-600-cb7621278.webp 600w, /assets/generated/images/recipes/D5C33AEE-2F3D-48EC-BF62-0873E4525AA2-700-cb7621278.webp 700w" type="image/webp">

<source srcset="/assets/generated/images/recipes/D5C33AEE-2F3D-48EC-BF62-0873E4525AA2-400-cb7621278.jpg 400w, /assets/generated/images/recipes/D5C33AEE-2F3D-48EC-BF62-0873E4525AA2-600-cb7621278.jpg 600w, /assets/generated/images/recipes/D5C33AEE-2F3D-48EC-BF62-0873E4525AA2-700-cb7621278.jpg 700w" type="image/jpeg">

<img src="/assets/generated/images/recipes/D5C33AEE-2F3D-48EC-BF62-0873E4525AA2-700-cb7621278.jpg" alt="" homemade="" biscuits""="">
</picture>

另一方面：

<picture>
<source srcset="/assets/generated/images/recipes/4512C4FA-B9A8-4CB4-8647-204B8808CC19-21138-000009B71110BDB7-280-e0fa1b06f.webp 280w" type="image/webp">

<source srcset="/assets/generated/images/recipes/4512C4FA-B9A8-4CB4-8647-204B8808CC19-21138-000009B71110BDB7-280-e0fa1b06f.jpg 280w" type="image/jpeg">

<img src="/assets/generated/images/recipes/4512C4FA-B9A8-4CB4-8647-204B8808CC19-21138-000009B71110BDB7-280-e0fa1b06f.jpg" alt="" caramelized="" banana="" with="" rum="" sauce""="">
</picture>

---

如何编写css使第一张图片变大，因为它有高分辨率选项，但第二张图片变小？因为现在两者都是全宽的，颗粒状的看起来很糟糕。

你可以用这个来定位图像，如果你不想用百分比来表示宽度，你可以使用px或其他长度单位：

img[src="/assets/generated/images/recipes/D5C33AEE-2F3D-48EC-BF62-0873E4525AA2-700-cb7621278.jpg"] {
  width: 75%;
}

img[src="/assets/generated/images/recipes/4512C4FA-B9A8-4CB4-8647-204B8808CC19-21138-000009B71110BDB7-280-e0fa1b06f.jpg"]{
  width: 25%;
}

如果要缩短代码，可以使用“结束于”子字符串属性选择器：

img[src$="cb7621278.jpg"] {
  width: 75%;
}

img[src$="e0fa1b06f.jpg"]{
  width: 25%;
}