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;
...
}
Related
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%;
}
https://pastebin.com/2AY6s2tm
html
<picture>
<!-- _1_1_2, _16x9 -->
<source srcset="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_70_height_39_dpr_1x_ver_4.webp 1x" type="image/webp" media="(max-width: 359px)">
...
<source srcset="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_339_height_190_dpr_1x_ver_4.jpg 1x" type="image/jpeg" media="(min-width: 1920px)">
<img loading="lazy" width="70" height="39" src="/media/img/raster/4fe4c2e2-b8f3-4c88-a06d-2f44e76f53ef/img_width_239_height_134_dpr_1x_ver_4.jpg" alt="Trololo">
</picture>
css
img {
width: 100%;
}
Well, lazy loading.
Images should include width and height.
Documentation: https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
If we don't include width and height, layout shifts can occur.
So, if we include width and height, then a clever browser calculates its proportions. And allocates the necessary space for the element.
Please, have a look at the image. I stipulated width = 70 and height = 39.
This seems reasonable. This image's aspect ratio is 16 : 9.
height = 70 * 9/16 = 39.375 ~ 39.
If I'm not mistaken, exact pixels are not important here: screens will always be different in mobile world.
Problem
As we can clearly see, width fits the width of the parent element. But the height is still 39. It has not been recalculated.
And of course, this distorted the whole aspect ratio of the image.
Could you help me here.
I would imagine if you set in CSS width:100%; you also need to explicitly set the height:auto;.
img {
width: 100%;
height: auto;
}
You may also find some structural advice here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
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'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>.
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>