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>
Related
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'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>.
The code below uses the picture HTML5 element to display a different versions of an image, depending if the user uses a mobile device or a desktop.
Question: How can I make only mobile_image.png 10% the width of the viewport (window)? Why can't I add a css class or style tag to source media?
<div class="my_container">
<a href="#back_to_top">
<picture>
<source media="(max-width:767px)" srcset="mobile_image.png">
<source media="(min-width:768px)" srcset="desktop_image.png">
<img src="fallback_image.png" alt="Back to Top">
</picture>
</a>
</div>
Using the code below - nothing!
#media only screen and (max-width : 767px) {
.my_container {
width:10%;
height:auto;
}
}
You can also add classes to the "img src" line of the code:
<picture>
<source media="(min-width:768px)" srcset="tablet_image.png">
<source media="(min-width:992px)" srcset="desktop_image.png">
<img src="fallback-mobile_image.png" alt="whatever" class="img-responsive center-block etc">
</picture>
The classes are then applied to whichever image is being rendered by the screen size. Definitely helpful for when you're using a framework like Bootstrap or Foundation.
If i'm understanding what you want correctly try targeting the img tag in the picture element then apply your styles to that.
e.g.
#media only screen and (max-width : 767px) {
.my_container img {
width: 10%;
height: auto;
}
}
Also add the polyfill so it will work cross browser - https://github.com/scottjehl/picturefill
I'm trying to load a different inline image depending on the screen resolution (smaller resolution equals smaller image). At the minute I have this:
<img class="lazy" data-original="img1.jpg" src="img1.jpg" alt=""
height="638" width="1349">
In the past I've used background images and media queries. Is there a way to do this using inline images?
I think the best solution is this: but its still a working draft and has no (broad) support yet
<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>
More about responsive images.
For now you might want to use the picturefill JavaScript:
<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
</noscript>
</span>
fine
remove images size in (img) tag and set image height n width in the class="lazy" in css file
and now for 2nd part image size depending on the screen resolution
you need to use media-query in css file
for example
#media (min-width:320px) { .lazy{height: 200px; width: 300px;} }
#media (min-width:481px) { .lazy{height: 250px; width: 350px;} }
now when this image open in small-phone/devices, image size will change to 200x300
and if this image open in tablets image size will change to 250x350
you can find more media size in internet
hope this solved your proble
have a nice day
#media and content can be used to acheive that
#media screen and (max-width: 600px) {
.lazy{
content:url(" // image url ");
}
}
Works on:
Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6
Does not work on:
FireFox 27.0
IE 11.0