I am trying to change images depending on the screen size, but it doesn't work.
My code
<amp-img alt="description" src="img/picture-large.png" width="675" height="540" layout="responsive" srcset="img/picture-small 565w" sizes="(max-width: 1130px) 50vw, 100vw"></amp-img>
I want that from 1130px, selects the small image
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 have an img tag with the attribute of "sizes".
but I don't know why it doesn't work
<img
src="photo/gallery/tezos.jpg"
alt=""
srcset="photo/photo gallery/tezos#1x.jpg 1x,
photo/photo gallery/tezos#2x.jpg 2x,
photo/photo gallery/tezos#3x.jpg 3x"
sizes="
(max-width:600px) 100vw, (max-width:900px) 50vw, 33vw"
/>
also I think the "srcset" attribute doesn't work.
why?
You need to specify the source file by the attribute "srcset" not the "src". The srcset and sizes attributes work together to create responsive images.
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 trying to get responsive images to work for my header image.
<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(width: 960px)">
This is what I have so far, and it kind of works but when it gets larger than 960px the image keep getting larger, I want it to stop when it reaches 960px.
<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(max-width: 960px) 100vw">
What am I doing wrong?
You can and should control the displayed width with CSS (i.e.: max-width: 960;), but you also should inform the browser the displayed size via the sizes attribute. The default of the sizes attribute is 100vw:
sizes="(max-width: 960px) 100vw" is transfered to sizes="(max-width: 960px) 100vw, 100vw", which basically means, if the viewport is lower 960px use the full viewport, otherwise use the full viewport, which doesn't make much sense. What you want is the following:
sizes="(max-width: 960px) 100vw, 960px"
You can also write:
sizes="(min-width: 960px) 960px, 100vw" or as shorthand: sizes="(min-width: 960px) 960px"
<img srcset="/media/1501/here_header.jpg 960w, /media/1650/here_small.jpg 320w" sizes="(max-width: 960px) 100vw, 960px" style="max-width:960px;">
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