CODEWITHSUNDEEP
htmlcss
cfn
cfn

Reputation: 69

Display larger image only when picture tag serves high resolution

I'm using a Jekyll plugin that delivers multiple image resolutions to the browser; problem is, not all my images are the same resolution, so I want photos that are lower resolution to be displayed smaller rather than blown up.

So if my code is this for one image:

<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>

and this for another:

<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>

How do I write the css to make the first picture big because it has high resolution options but the second picture smaller? Because right now both are full width and the grainy ones look awful.

Upvotes: 1

Views: 57

Answers (1)

Bert W
Bert W

Reputation: 556

You could target the images with this, if you don't want to use percentages for width, you could use px or another length unit:

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%;
}

If you want to shorten the code you could use the "ends with" substring attribute selector:

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

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

Upvotes: 1

Related Questions