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
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 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 am trying to get responsive images working and I have this layout so far...
.container {
display:flex;
max-width:1000px
}
.col1 {
flex:1;
background:teal;
text-align:center;
}
.col2 {
flex:1;
background:wheat;
text-align:center;
}
.img-responsive {
max-width:100%;
height:auto;
}
<div class="container">
<div class="col1">
This is column 1
<img
class="img-responsive"
src="https://dummyimage.com/1000x1000/000/fff"
srcset="https://dummyimage.com/1000x1000/000/fff 1000w,
https://dummyimage.com/750x750/000/fff 750w,
https://dummyimage.com/400x400/000/fff 400w"
sizes="(max-width: 1000px) 1000px,
(max-width: 7500px) 750px,
(max-width: 400px) 400px,
1024px"
">
</div>
<div class="col2">
This is column 2
</div>
</div>
I am expecting the 1000px image to be displayed when the screen is 1000px and above, the 750px version at 750px and above and so on...
But it only ever gives me the large version, where am I going wrong?
There are a number of reasons this might happen:
Your browser has probably cached the larger version of the image already, so it's more efficient to use it than to hit the network for a new copy.
The device pixel ratio is > 1.0, causing the browser to request a higher than expected resolution version
The presented width of the image is greater than the next smallest image in the srcset.
On closer examination, there are a few odd things going on with your example.
You're using sizes as though it's a media query for the element; those min/max width media queries work the same as they do elsewhere, though, which is to say that they apply to the size of the viewport, not the element. The default is 100vw, which is the width of the viewport. You might need something instead like 50vw.
sizes is evaluated in order; the first match will be used. In your case, that's (max-width: 1000px), which will be true for viewports <= 1000px. This means you're asking the browser to load the largest of your proposed images.
The use of max-width instead of min-width is a little unusual, especially in conjunction with 1:1 ratio between the max-width and the requested image size. You would more commonly see something like (min-width: 768px) 600px, 100vw, which tells the browser to load an image for a presented size of 600px if the viewport is wider than 768px (our example mobile stacking breakpoint), and otherwise to load one for display at the full width of the viewport (that's the 100vw fallback).
Finally, you have an extra double-quote (") right before the closing bracket of your img tag, though I don't know if it is affecting your example or not.
Try using a picture tag in place of your img tag. Place the sources form largest size to smallest size, with the a default img tag at the end.
Like this:
<picture>
<source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</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>
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