I have a Blade directive that generates an HTML <img> tag with srcset and sizes attributes. But only the 1280px option is used, regardless of the resolution (I do tests in Edge through the device emulation feature).
<img src="https://my.link/logos/casa-nova/logo.png" srcset="
https://my.link/logos/casa-nova/logo414.png 414w,
https://my.link/logos/casa-nova/logo768.png 768w,
https://my.link/logos/casa-nova/logo1024.png 1024w,
https://my.link/logos/casa-nova/logo1280.png 1280w,
https://my.link/logos/casa-nova/logo.png" sizes="
(max-width: 414px) 414px,
(max-width: 768px) 768px,
(max-width: 1024px) 1024px,
(max-width: 1280px) 1280px,
100vw" width="213" height="67" alt="alt">
Related
I am tring to show different image based on screen resolution in one <img tag, i read several tutorial but i can't get it work
Screen < 768px show banner_mobile.png (500x500)
More than 768px show banner_desktop.png (1370x200)
<img
srcset="banner_mobile.png 768w,
banner_desktop.png 1024w"
sizes="(max-width: 768px) 768px,
(max-width: 1024px) 1024px"
src="banner_desktop.png"
alt="test">
while validating my page on w3 I get lots of errors like:
Bad value (max-width: 768px) 321px,(min-width: 768px)
407px,(max-width: 768px and min-resolution: 2dppx) 642px,(min-width:
768px and min-resolution: 2dppx) 814px,321px for attribute sizes on
element img: Bad media condition: Parse Error at …resolution: 2dppx)
I understand that something is wrong with the sizes attribute, but still can't find out what
This is the html
<img
class="polaris__image lazyload"
alt=""
height="188"
role="presentation"
sizes="(max-width: 768px) 321px,(min-width: 768px) 407px,(max-width: 768px and min-resolution: 2dppx) 642px,(min-width: 768px and min-resolution: 2dppx) 814px,321px"
src="https://media.itpro.co.uk/image/upload/t_card-mobile#1/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg"
srcSet="https://media.itpro.co.uk/image/upload/t_card-mobile#1/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 321w,https://media.itpro.co.uk/image/upload/t_card-desktop#1/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 407w,https://media.itpro.co.uk/image/upload/t_card-mobile#2/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 642w,https://media.itpro.co.uk/image/upload/t_card-desktop#2/v1570816514/itpro/2019/04/arcserve_udp_9240dr.jpg 814w" width="321"
/>
Is the combined use of max/min-width and min-resolution an error?I alkso tried using PPI but it still returns an error.
I have this image tag with a few different srcs and it's only loading the one. I feel like I followed the directions, but it's only loading the 600px width image (w_600 image).
<img
srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w,
https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg 520w,
https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg 440w,
https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg 360w,
https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg 280w"
sizes="(min-width: 1500px) 600px,
(max-width: 1200px) 520px,
(max-width: 992px) 440px,
(max-width: 768px) 360px,
(max-width: 480px) 280px"
src="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg 600w"
alt="picture"
class="picture"
/>
Here's a Live Demo
I'm trying to get it to load the largest image one desktops, and the smallest image on mobile devices, but it'a always loading the large image. Am I misunderstanding the purpose of srcset?
Try this and see,
<picture>
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_600%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1500px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_520%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 1200px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_440%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 992px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_360%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media=" (min-width: 768px)">
<source srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" media="(min-width: 480px)">
<img srcset="https://res.cloudinary.com/tjblackman08/image/upload/w_280%2Cf_auto%2Cq_auto/Brads-House/4.jpg" alt="Placehold" class="image">
</picture>
Hope this helps.
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;">
On MY WEBSITE
I have this code:
<div>
<center><img src="images/ipadframe.png" width="200" height="300"></center>
</div>
<div style="position:absolute; left:233; top:35;">
<img src="images/xclomobi.jpg" width="152" height="233">
</div>
<div class="section_w280 fl">
<ul class="future_project"><br><br>
<li>Website: #</li>
<li>Role:<font size="2"> CSS / PHP / MYSQL</font></li>
<li>#li>
</ul>
<div class="cleaner"></div>
</div>
<div class="section_w140 fr"><br><br>
<div class="rc_btn_02">Visit</div>
<div class="cleaner"></div>
</div>
<div class="margin_bottom_20 border_bottom"></div>
</div>
which displays perfectly on my desktop but not on my ipad or smaller screens.
how do I edit the div style above so that it loads reads an alternative code when viewing this on a device listed above?
Is there a way to get it to display correctly no matter what device they are viewing it on?
What you need is implement Responsive design by using #mediaquerys...
iPAD Portrait and Landscape
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPAD LANDSCAPE
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPAD PORTRAIT
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
By using this, you can set the CSS styles only for that device...
Also need to read this...
Another alternative I find myself jumping into are responsive frameworks like Bootstrap or Foundation by ZURB. They provide a stunning amount of components to get you on your responsive way in record time. Both have their pros and cons, you should eval which one suits your needs.