When working with the <picture> element, only the first <source> is being utilized while the others are being disreg

When it comes to the img tag and the source tags, it simply switches between the first source tag based on the parameters provided.

        <picture>
            <source media="(min-width: 800px)" srcset="https://via.placeholder.com/800x700">
            <source media="(min-width: 900px)" srcset="https://via.placeholder.com/900x800">
            <source media="(min-width: 1000px)" srcset="https://via.placeholder.com/1000x900">
            <img src="https://via.placeholder.com/500x400" alt="">
        </picture>
htmlcss

Answer №1

The <source> tag is essential for specifying multiple media resources for various media elements like <video>, <audio>, and <picture>.

By using the <source> tag, you can provide alternative video/audio/image files for the browser to choose from based on criteria such as media type, codec support, or media query.

As a result, only the first element will be visible by default. If you need to display more than one element, you will need to utilize a different tag.

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

The div in Bootstrap is not becoming scrollable despite using "overflow: auto"

I have a unique setup with two divs nested inside another div. The first div contains a table, while the second div holds buttons. I'm trying to make the table div scrollable by using overflow-auto, but it's not working as expected. I suspect tha ...

htmlcsstwitter-bootstrapbootstrap-4

I am seeking assistance with optimizing my website for mobile use as I have exhausted all recommendations I could find without success

After years of working with HTML, I am now faced with the challenge of making my website mobile-friendly. Despite trying various suggestions found online, the mobile version of my site is still not functioning properly. Currently, only about 6 pages are op ...

htmlmobile

increasing the size of a particular text box above the rest

Just starting out with bootstrap and trying to figure out how to make one text box larger than the others. See my code below: <div class="row"> <div class="col-md-2"> <mat-form-field > <input matInput pla ...

cssbootstrap-4

What is the standard size for PHP files, or the suggested maximum limit?

I created a tool at where users can upload a .php file with comments and spaces, and it will compress it for a smaller file size. It functions similar to but is web-based and provides instant results. Once you click upload, you receive a prompt to downl ...

phphtmluploadpreprocessor

Aligning Images Inside Div Containers

I am currently facing an issue with centering 4 images on my website and my brain seems to have hit a roadblock in solving this problem. Here is the Fiddle link for reference -> http://jsfiddle.net/theminijohn/bcMX5/ Simply using the <center> ta ...

htmlcss

How to target the nth child element uniquely in CSS

Is there a way to style items 1 through 10 in CSS without using nth-child selectors individually? Instead of doing: &.nth-child(1) { //style } &.nth-child(2) { //style } &.nth-child(3) { //style } I'm looking for a range selector in C ...

htmlcsssass

Is it possible to utilize AJAX requests in order to create a marker on google maps that updates in real-time?

My goal is to develop an app that generates a real-time updating google map, and I have been advised that AJAX requests can help achieve this. Nevertheless, after studying the documentation, I am uncertain about how to apply this method to solve my issue ...

javascripthtmlajaxflask

Unique phrase: "Personalized text emphasized by a patterned backdrop

I'm facing a challenge and struggling to find a way to highlight text using CSS or jQuery. My goal is to have an image on the left, another one on the right, and a repeated image in between. Since there are some long words involved, I need a dynamic s ...

javascriptjqueryhtmlcss

Is there a way to show the input value in a different form while still retaining the original value?

When receiving a pagination number from user input, I store it in a variable like so: $html .= "<input type='submit' name='next' value='$next_page_number' />"; Now, I'm looking to replace the displayed text for th ...

phphtmlcss

How do I view a wildcard in my ID selector using jQuery?

When I want to initially hide various content scattered around the page, I usually use the following jQuery code: $('#objective_details, #time_estimate_details, #team_members_details, #resources_details').hide(); Is there a method to utilize a ...

javascriptjqueryhtml

Ui Bootstrap (angularjs) sidebar is not functioning properly

I am encountering an issue with a sidenav that I am in the process of creating for one of my projects. The goal is to develop a side menu that shifts the content to the right when opened and returns it to the left when closed, essentially functioning as a ...

javascripthtmlangularjscssangular-ui-bootstrap

What is the process of choosing a language (English/French) within a pop-up?

<body style="text-align:center"> <h2>Popup</h2> <div class="popup" onclick="myFunction()">Interact with me to show/hide the popup! <span class="popuptext" id="myPopup">A Simple Popup!</span> </div> <script& ...

javascripthtmlwebpopuppopupwindow

Cannot see the box-shadow with :before and z-index in CSS

My main objective is to prevent the box-shadow from overlapping with adjacent elements by utilizing the :before pseudo-element and adjusting the z-index. However, I am facing an issue where the shadow appears beneath the container of the list item that is ...

htmlcssbox-shadow

Designing a card flip animation featuring front and back faces without using absolute positioning

Looking to enhance my website with a new feature that incorporates the card-flipper schema found on David Walsh's site: https://davidwalsh.name/css-flip. The challenge arises from the fact that the content within my cards is dynamic, making the height ...

htmlcsscss-positioncss-transforms

What is the best way to eliminate the excess height in my <li> element?

I'm a little unsure about how to articulate my question, so I'm just going to share the code: body { background-color: #232026; background-image: url('galaxy16cropped.jpg'); background-position: center top; background-repeat: ...

csshover

Trouble with JavaScript loading in HTML webpage

<!DOCTYPE html> <html> <head> <title>Breakout Game</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas width="900" height="450" class="canvas"></canvas> ...

javascripthtmlcssdom

Unlocking new perspectives with a click

Currently exploring Angular development, I have encountered a question here but couldn't find the solution I was looking for. I am seeking suggestions and ideas on how to approach this issue. Essentially, my HTML includes buttons like the ones shown ...

htmlcssangulartypescript

What are the advantages and disadvantages of using the picture element in web design?

What advantages and disadvantages come with using the HTML5 picture element? Specifically, does the browser download all images or only the image that matches the media query? ...

htmlimageperformancepicture-element

Explore the Shopify assistance on the secondary blog section within a separate page

Hey there, I'm looking for someone who is familiar with Shopify and can assist me. I am currently trying to set up a secondary Blog section on a separate page from my default 'Blog Page', but I'm encountering issues in displaying the a ...

htmlcssshopify

Is it possible for me to position an element beside the element before it?

Imagine a traditional layout consisting of paragraphs grouped with a sidebar. However, there are two issues with this setup: first, the browser displays the sidebar (typically used for navigation) before the main content, causing problems for screen reader ...

htmlcssresponsive-design