Error occurs when SRCSET loads the wrong size because "sizes" parameter is missing

According to the guidelines, when sizes is not specified in the image attribute, the browser should automatically calculate the required size based on CSS rendering.

In this scenario, my image is 300px and the browser should select the 300px image. However, it's opting for the 1024px image instead.

<html>
  <div style="width:300px">
    <img
      width="100%"
      src="https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-560x336.jpg"
      class="attachment-csco-medium-alternative size-csco-medium-alternative wp-post-image"
      alt=""
      srcset="
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-300x200.jpg   300w,
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-380x253.jpg   380w,
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-768x512.jpg   768w,
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-800x533.jpg   800w,
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-1024x683.jpg 1024w,
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds-1160x773.jpg 1160w.
    https://staging.wpspeedmatters.com/wp-content/uploads/2019/11/migrating-birds.jpg          1500w,
    "
    />
  </div>
</html>

https://jsfiddle.net/khsyLxdr/

htmlcsssrcset

Answer №1

It seems that there may be an issue with the way you're utilizing the syntax, particularly with the (Number) w at the conclusion. Have you considered adjusting it to 1X, 2X, or similar values? Additionally, have you experimented with specifying the specific size within the CSS code? Keep in mind that HTML will showcase the image exactly as it is unless you make changes to its attributes.

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

What is the method for rotating a map using JavaScript?

My map built with Leaflet displays a route and a moving car marker. Now, I am looking to implement a feature where the map rotates based on the direction of the car. I have access to both the current coordinates of the car and the target coordinates. ...

javascriptjquerycssleaflet

Adjustable height and maximum height with overflow functionality

Currently, I am in the process of developing a task manager for my application and facing an obstacle when trying to calculate the height of a widget. My goal is to determine the maximum height (assuming a minimum height is already set) by subtracting a ce ...

javascriptjquerycss

What are the steps to incorporating ng2-dnd with a background-image?

I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element. My goal is to allow user ...

htmlcssangular

Arrange an element to appear hidden behind a text

I have a stylish horizontal navigation bar with links set up like this: <div class="blackbar"> <span class="blackbar-text"><a href="news.php">NEWS</a></span> <span class="blackbar-text"><a href="foo.php">F ...

jqueryhtmlcss

Sending arguments from JavaScript to PHP via ajax

I am facing a challenge where I need to send a JavaScript variable to a PHP function. While I was successful in doing this with hard-coded values, I'm struggling when it comes to using variables. Here's an example of what worked for me: <butt ...

javascriptphphtmlajax

Several different forms are present on a single page, and the goal is to submit all of the data at

Looking for assistance with combining Twitter and Google data entry at once. Here's the code I've developed: Please guide me on how to submit Twitter and Google details together. <html> <head> <script type="text/javascript">< ...

javascripthtmlforms

Tips for creating a unique scroll page arrow button with adjustable thickness?

Seeking guidance on how to adjust the thickness of the arrow used as a scroll button on my website. I am aiming for a similar look to the arrow on this particular website: example of arrow To view my code, please visit: Codepen .next { position:absolut ...

javascripthtmlcss

Alter the color of a single character using JQuery, all while keeping the HTML tags unchanged

I'm currently working on iterating through the DOM using JQuery in order to change the color of every occurrence of the letter m. Here is what I have so far: $(document).ready(function(){ var m = "<span style='color: red;'>m</span& ...

javascriptjqueryhtmldomdom-manipulation

Hidden Document Scroll Offset

When CSS is used to hide scrollbar html, body { width: 100%; overflow-x: hidden } The above code snippet removes the scroll from the window but triggers it on the body element. To calculate the scroll values in such cases, you can use: pageOffset = ...

javascriptcssdom

Vuejs components that have checkboxes already selected out of the box

Hey there, I'm facing a small issue. Whenever I click on the areas highlighted in the image, the checkbox on the left gets marked as well. Any idea why this might be happening? https://i.stack.imgur.com/nqFip.png <div class="form-check my-5&qu ...

htmlcssvue.js

Tips for adjusting the width of an li element based on the width of its longest content

My database dynamically populates an unordered list with content, utilizing the following code in the back end: StringBuilder output = new StringBuilder(); int lastDepth = -1; int numUL = 0; foreach (DataRow row in dt.Rows) { ...

jquerycss

Interested in compressing CSS and JavaScript using PHP, but uncertain about the impact on performance and the best methods to implement it?

My current approach involves using PHP to combine multiple css (or js) files into a single file, while also compressing the content using GZIP. For example, the HTML page makes calls to resources like this... <link rel="stylesheet" href="Concat.php?fi ...

phpjavascriptcsscompressionserver-side

Expand a div without causing any displacement to surrounding elements

If you have 4 colored divs (red, yellow, green, blue), with 2 per row, and need to expand the second (yellow) without creating a gap under the red, check out this solution. The blue will be positioned underneath the expanded yellow. For a live example, vi ...

htmlcssvue.js

CSS Issue: Hovering Over Link Causes Text to Shift in Internet Explorer

Encountering a problem with CSS and IE, specifically in Internet Explorer 9. When hovering over certain links, the text shifts down which does not occur when using Firefox. You can see an example of this issue at: http://www.debtdispatch.com/list_item_err ...

htmlcssinternet-explorerdrupaldrupal-7

Using PHP variables in HTML frameset URL for dynamic content passing

Looking for help to pass a PHP variable through a frameset URL. I've been trying different techniques without success so far. Can anyone provide some guidance? Here is an example of my code and what I have attempted: <?php $var = 2+3 ?> < ...

phphtmlhtml-frames

Concealing unnecessary borders on list elements using jQuery

Here is the code I am working with: http://jsfiddle.net/eLyJA/ I am looking to calculate and eliminate all border edges to achieve this visual effect: ...

htmlcss

Using Geolocation in HTML5 and JavaScript

Currently, I am working on my debut mobile web application and have successfully integrated Google Maps into it using Geolocation JavaScript API version 3. Now, I am looking to add a button that, when clicked by the user, centers the map on my location o ...

javascripthtmlgeolocation

Series of responses cascading from one another

Users are experiencing an issue where the need for adjusting margins based on the depth of responses in posts. Currently, this involves setting a margin-left value of 40px for one level deep reactions and 80px for two levels deep, and so on. To address th ...

htmlcsswidthmargincenter

Having trouble with the toggle button on the Bootstrap 5 navbar?

I am facing an issue with my HTML code where the toggle button does not display properly when I resize the browser screen. Upon clicking on it, the navigation bar items do not show at all. Here is a screenshot of my website <html> <head> ...

javascripthtmljquerycssbootstrap-5

Modifying column layout within an HTML webpage

I'm seeking advice on modifying a code. I'd like to keep it the same as it is now, but with one change - I want to decrease the width of the main video box and add another one beside it with an iframe code for a chatbox. Here's the current c ...

javascripthtml