I'm currently using picture srcset for responsive images and currently looking for a way to make it scale or cover the entire element or container, much like css background-size: cover or object-fit. I've read that object-fit only works on img tags is there an alternative for srcset. I'm using Drupal 8 responsive image module and it renders a picture element
<picture>
<source srcset="/aim-beta/sites/default/files/styles/thumbnail/public/2017-08/admissions-banner-how-to-apply-alt.jpg?itok=O11apfmI 1x" media="all and (max-width: 480px)" type="image/jpeg">
<source srcset="/aim-beta/sites/default/files/styles/medium/public/2017-08/admissions-banner-how-to-apply-alt.jpg?itok=QrLnqmKd 1x" media="all and (max-width: 768px)" type="image/jpeg">
<img srcset="/aim-beta/sites/default/files/2017-08/admissions-banner-how-to-apply-alt.jpg" alt="Admissions - How to Apply" typeof="foaf:Image">
</picture>
object-fit works on responsive images, because you style the <img>, not the <picture>.
Related
Is it possible to use responsive images, for fetching an appropriately sized image, along with art direction for displaying a different image on mobile?
I haven't seen any docs with an example of this, but I also haven't seen any docs saying you can't.
This is the simplified code that I thought might work but doesn't (the original is messy Liquid/Shopify code)
<picture>
<source
media="(max-width: 989px)"
srcset="
image-one-300.jpg 300w,
image-one-800.jpg 800w,
image-one-1200.jpg 1200w,
image-one-1800.jpg 1800w,"
sizes="100vw"
src="image-one_1800.jpg"
>
<img
srcset="
image-two-300.jpg 300w,
image-two-800.jpg 800w,
image-two-1200.jpg 1200w,
image-two-1800.jpg 1800w,"
sizes="100vw"
src="image-two_1800.jpg"
>
</picture>
The way that I do separate images for mobile is to simply add some CSS and then split them out:
CSS:
.mobileOnly {display:none;}
.desktopOnly {display:block;}
#media only screen and (max-width: 600px) {
.mobileOnly {display:block}
.desktopOnly {display:none;}
}
Then in the HTML, you have classes that you can add to elements:
<img class="desktopOnly" src="..." />
<img class="mobileOnly" src="..." />
The great thing about this is that you can use it for anything, including specific divs, text and much more!
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.
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%;
}
I have two pictures: small and big youtube logo. I want my big youtube logo display when the width of my screen is more than 600px. And I want my small youtube logo display when the width of my screen is less than 600px.
!Also my big logo have to be on a half of the screen. But there's the problem. When I establish to my big logo some properties to make it behave this way, this logo stopes display at all.
Here's my code:
<picture>
<source srcset="https://i.postimg.cc/L5hRsX4B/youtube-logo-font.jpg" media="(min-width: 600px) 50vw">
<source srcset="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg">
<img src="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" alt="photo-youtube">
</picture>
What did cause this bahaviour? And how can I fix this?
Thanks!
I got it! There is the thing that I mixed up with 2 attributes: media and sizes. They work differently. We should establish media attribute without desired width of element. For example:
media="(min-width:650px)"
And we can establish sizes attribute with the width of our element. For example:
sizes="(max-width: 320px) 280px"
And also this attribute can work like this. This example shows that we have to establish the desired width of our element in sizes attribute. It's necessary!
sizes="280px"
We can use media if we want to replace some pictures. And we can use sizes if we want our pictures responsive. There's no html property which can solve this problem. So, the best way is using CSS (or JS) aditionally.
It works fine directly set with css media query as followed:
Demo
#media only screen and (min-width: 600px){
picture{
width: 100vw;
}
img, source{
min-width: 50vw;
width: 50%;
}
}
<picture>
<source srcset="https://i.postimg.cc/L5hRsX4B/youtube-logo-font.jpg" media="(min-width: 600px) 50vw">
<source srcset="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg">
<img src="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" alt="photo-youtube">
</picture>
for this project you should put media="max-width:600px" and run project.
<picture>
<source srcset="https://i.postimg.cc/L5hRsX4B/youtube-logo-font.jpg" media="(min-width: 600px) ">
<source srcset="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" media="(max-width:600px)">
<img src="https://i.postimg.cc/yN7Mddvg/Logo-youtube-ios-cropped.jpg" alt="photo-youtube">
</picture>
I've been struggling some hours trying to understand how the picture tag exactly works. I'm able to load different art directions at specific screen sizes using the <picture> tag in combination with <srcset> but I can't seem to find how I make these responsive.
I gave the <picture> element a class named .header-img. I tried to set media queries for the class and adjust the size of it. But when I try to set a width to .header-img, the width doesn't change.
Maybe an important detail, the <picture>element is inside a grid
<picture class="header-img">
<source media="(max-width: 500px)" srcset="./assets/img/header/header-bg-sm.png">
<source media="(max-width: 1100px)" srcset="./assets/img/header/header-bg-md.png">
<source media="(max-width: 1300px)" srcset="./assets/img/header/header-bg-lg.png">
<img src="./assets/img/header/header-bg-lg.png" alt="ISB header">
</picture>
Any help is really really appreciated !
Add this to your CSS:
.header-img img {
max-width: 100%;
}
And also, you have a container with property width of 70rem.
You should change the property width to max-width like so:
.container {
max-width: 70rem;
...
}
I got at problem! I have used <picture> in my html and I see now that it is not supported in Safari and IE. I have one image for browser max-width: 660px and a new image for browser min-width: 660px. Do anyone have some suggestion on how to do this?
img {
max-width: 100%;
}
<picture>
<!-- Use CSS media queries in media attribute (this will show for screens less than 661px) -->
<source srcset="http://lorempixel.com/660/200" media="(max-width: 660px)">
<!-- Default image (this will show for screens greater than 660px) -->
<source srcset="http://lorempixel.com/1200/400">
<!-- Use this image if <picture> element isn't supported -->
<img src="http://lorempixel.com/1200/400" />
</picture>