The problematic max-width with srcset attribute

Here's the HTML markup I'm working with:

<picture>
   <source 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" 
         media="(max-width: 2560px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1920.jpg" 
         media="(max-width: 1920px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1600.jpg" 
         media="(max-width: 1600px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1336.jpg" 
         media="(max-width: 1366px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1200.jpg" 
         media="(max-width: 1200px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_991.jpg" 
         media="(max-width: 991px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_767.jpg" 
         media="(max-width: 767px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_480.jpg" 
         media="(max-width: 480px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_360.jpg" 
         media="(max-width: 360px)">
   <img 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" alt="">
</picture>

I've noticed that the images are not displaying when the media query is set to max-width, but they work fine when it's set to min-width.

Any suggestions on how to fix this issue?

htmlcsssrcset

Answer №1

To make it work, simply reverse the order of the sources because the correct order matters. Here is the revised code:

<picture>
   <source 
         srcset="img/home-page/placeholders/placeholder_360.jpg" 
         media="(max-width: 360px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_480.jpg" 
         media="(max-width: 480px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_767.jpg" 
         media="(max-width: 767px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_991.jpg" 
         media="(max-width: 991px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1200.jpg" 
         media="(max-width: 1200px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1336.jpg" 
         media="(max-width: 1366px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1600.jpg" 
         media="(max-width: 1600px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_1920.jpg" 
         media="(max-width: 1920px)">
   <source 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" 
         media="(max-width: 2560px)">
   <img 
         srcset="img/home-page/placeholders/placeholder_2560.jpg" alt="">
</picture>

If you need to add another media query, such as min-device-pixel-ratio as mentioned in your comment, you can easily do so:

   <source 
         srcset="img/home-page/placeholders/placeholder_2560-3.jpg" 
         media="(max-width: 2560px) and (min-device-pixel-ratio: 3)">

or 

   <source 
         srcset="img/home-page/placeholders/placeholder_2560-3.jpg" 
         media="(min-device-pixel-ratio: 3)">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for jquery to run an entire HTML file using ajax?

Based on information from a discussion on Stack Overflow, it seems that I can utilize the jquery getScript() method to run a remote JavaScript file loaded via Ajax. However, in my specific scenario, the script file is located within an HTML file. Is ther ...

javascriptjqueryhtmlajax

Incorporating Dynamic Javascript: A Step-by-Step Guide

I came across a select object that looks like this: <select id="mySelect" onchange = "start()" > <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> < ...

javascriptjqueryhtml

Extracting CSS data and storing it in a SQL database

Hello there, I've created a div using CSS like this: echo '#'. $pess2['naam'] .' { width: 190px; height: 90px; padding: 0.5em; float: left; left:'. $pess2['left'] .'px; top:'. $pess2['top'] ...

javascriptphpjquerycss

Styling Descendants Conditionally in Angular 2

.parent { color: blue; } .parent * { color: red; } .child { color: black; } .grandchild { color: green; } <div class="parent"> Parent <div>Child <div>GrandChild</div> </div> </div> Imagine a scenari ...

cssangularng-classng-style

Arranging rows of a specific height within a table at any location

I need to create a virtual table to browse through a very large dataset. Is there a way to position the rows (with fixed height) anywhere within the table? The issue I am facing is that the table properties automatically adjust the row height, disregarding ...

htmlcss

How can I add a loading page to my HTML/CSS website?

Currently, I am delving into the realm of coding and have encountered an issue while trying to integrate a loading page into my HTML. Despite referencing the code from this source, it appears that the loading page is not functioning as intended. Any assist ...

htmlcss

Troubleshooting: Issues with jQuery JavaScript Modal Popup functionality within MVC framework

When I click on the "Comments" link, a modal popup opens up and displays the content as expected. Now onto my issue: In the first scenario, the desired outcome is achieved but some other code does not execute. In this case, when I place the "@section" ins ...

javascriptjqueryhtmlajaxasp.net-mvc

Displaying a single item per click using jQuery

Hey there, I have a small issue with some HTML divs and show/hide functionality. I'm trying to make it so that only one div is shown per click, but my current jQuery code is showing all the divs at once. Any suggestions on how to fix this? Check ou ...

jquerycss

Move your cursor over the top and bottom of the image to experience distinct effects

Trying to create an effect where the top 50% of an image shows a different color and text when hovered over, and same for the bottom 50%. Currently, only able to achieve this effect for the lower half of the image. Is there a way to make it work for both h ...

htmlcss

Is there a translation issue affecting Chrome version 44?

Recently, Chrome 44 (44.0.2403.89 m) was released and I've encountered some issues with the translate3d feature (on both Mac and Windows versions). This problem is impacting plugins such as fullPage.js and consequently affecting numerous pages at th ...

javascriptjquerycssgoogle-chrome

Angular: Dividing a web page with its individual controller

Exploring Angular Composition An individual new to Angular is eager to implement the concept of "composition," where the main page contains various smaller web page components. Starting off with just a Header section that binds perfectly. <html> &l ...

javascripthtmlangularjs

Using the 'onended' audio event emitter in Angular 2 along with a local member of the Component

I'm looking for assistance on how to utilize audio.onended() in order to play the next song in a playlist. I can successfully add songs to the playlist and play them using the above method with an audioObject. However, when audio.onended triggers, I ...

javascripthtmlangularaudio

The Bootstrap 4 navigation bar is failing to extend fully across the width when a dropdown menu

Here is the code I am using for the navigation bar. When I click on the dropdown button, this is how it appears on my webpage: Click here <nav class="navbar navbar-expand-lg navbar-dark bg-color mb-3"> <a class="navbar-brand" ...

htmlcssbootstrap-4

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

A dynamic number of divs are generated from a data source. Each div contains an image button and another div with text. While the actual scenario is more complex, we can present a simplified version: <div id="main"> <div id="content_block_1" ...

javascriptjqueryhtmlcss

Issues with AngularJS ng-bind-html failing to display list items

I am working with a basic HTML document that looks like this... <ol> <li><strong>Test 1</strong></li> <li><strong>Test 2</strong></li> </ol> ...and I am attempting to connect it to a div ...

javascripthtmlangularjsng-bind-html

A guide on transforming JSON data into HTML using Rails

I'm struggling with parsing JSON on a webpage. My webpage is designed with circles, where clicking on a circle triggers a call to the controller to retrieve specific information from a database and display it as graphs and text. The issue I'm fa ...

javascripthtmlruby-on-railsjson

Why is it that code that appears identical in the same browser and same size can look different when one version is deployed on localhost and the other remotely?

I've been working on a Material-UI Table where I customized the headers and table styles. While testing it locally with yarn start, it looked like this: https://i.stack.imgur.com/7yU2H.png However, when I viewed it on the remote system, it appeared ...

htmlcssreactjsfontsmaterial-ui

Updating the background image with Jquery is resulting in a distracting flicker effect

Here is a snippet of the script I'm using to create a slider that changes the background image for each image object in a specified time cycle. #Sliderimg - height set to 500px, $("#Sliderimg").css({ "background-image": "url(../Images/" + SliderIma ...

javascriptjquerycss

Is there a way to prevent a link from activating when I click on one of its internal elements?

Within a div nested inside an "a" tag (specifically in Link within next.js), there is another div labeled as "like." When clicking anywhere within the main div, the intention is for it to redirect to the destination specified by the "a" tag. However, if th ...

javascripthtmlcssreactjsnext.js

"Looking for a way to eliminate the background of an image on NextJS? Learn

https://i.stack.imgur.com/zAsrJ.png When this image is incorporated into a Nextjs rendering, it unexpectedly includes additional content. <div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3"> <div cla ...

javascriptcssreactjsnext.jstailwind-css