Responsive images in CSS3/HTML5 are designed to adapt to different

I am looking to implement responsive image sizing based on the webpage size. My images come in two different sizes:

<img src="images/img1.jpg" data-big="images/img1.jpg" data-small="images/img1small.jpg" alt=""></img>

The data-small image has a width of 100px.

@media (max-width:600px) {
    img[data-small] {
        content: attr(data-small, url); <-- unfortunately not functioning
       /*width:10px;*/ <-- this solution would work better
    }
}

My testing has been done on Firefox 37.0.1, Chrome 42.0.2311.90 m and Internet Explorer 11.

Despite my efforts, when I resize the browser width to under 600px, the image remains unchanged.

javascripthtmlcss

Answer №1

The content attribute is utilized in the :before and :after selectors. However, you can also utilize media queries.

<img src="images/img1.jpg" class="big_image" alt="">
<img src="images/img1small.jpg" class="small_image" alt="">

Here is an example of how the CSS would look:

@media (max-width:600px) {
    .small_image{ display:block }
    .big_image{ display:none }
}

@media (min-width:601px) {
    .small_image{ display:none }
    .big_image{ display:block }
}

Answer №2

When it comes to image tags, the key attribute is src. If you want to switch out the image displayed, you must update the src attribute directly, as CSS cannot handle this task.

The code snippet content: attr(data-small, url); does not alter the src attribute. Instead, it sets the element's content to the value of the data-small attribute, which has no effect on an img tag. Remember, CSS cannot modify the src attribute.

Consider using srcset as a solution. This method gracefully handles older browsers while ensuring compatibility with newer ones.

<img src="images/img1small.jpg" srcset="images/img1big.jpg 600w" alt="" />

Alternatively, user1936285's approach is also effective.

Answer №3

Why not try implementing CSS 

background-image: url("image.png")
instead of using <img> tags?

Consider the following approach:

@media (max-width:600px) {
    .container{ background-image: url("imagebig.png") }
}

@media (min-width:601px) {
     .container{ background-image: url("imagesmall.png") }
}

Check out WebPlatform's guide on CSS backgrounds for more information.

Answer №4

Application:

content: url(attr(data-small));

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

Even when autocomplete is disabled, Firefox continue to cache hidden input fields

I'm encountering an issue with a form that has the autocomplete attribute set to off. Within this form, there is a hidden input element (created using ASP.NET MVC's Html.HiddenFor() method): <input type="hidden" value="0" name="Status" id="S ...

asp.net-mvc-3htmlcachingautocompletehidden-field

Guide to storing a variable value when a user clicks on the client-side in a Grid View:

How can I store data in a variable on client click within a grid view? I have a Stored Procedure that returns Service Id based on the Department code provided. We are binding these details to a Grid View. How can we bind the Service Id to a variable that ...

javascriptc#asp.net

Creating a Smooth Curve with CSS

Recently, I've decided to create a unique clock design inspired by the one showcased here. However, instead of using images like they did, I would like to implement ARC. Is it possible to create an arc using only CSS? For instance, if I wanted to make ...

htmlcss

Executing Javascript dynamically in VueJS: Learn how to run code from a string efficiently

Currently, I am developing a website with VueJS that enables selected users to upload scripts for automatic execution upon page load. For instance, here is an example of the type of script a user may input: <script src="https://cdnjs.cloudflare.com/aja ...

javascriptvue.js

What is the reason behind the restriction on using capital letters in React project names?

When attempting to create a new project "newRecipeApp" in React, I encountered the following message: npx: installed 91 in 29.359s Could not create a project called "newRecipeApp" because of npm naming restrictions: * name can no longer contain capital ...

javascriptreactjsnpm

Password validation with Mongoose customization

I'm working on creating a Schema using mongoose, but I'm facing some challenges when it comes to implementing custom validation for the password. The password should meet the following criteria: It must contain at least one special character ...

javascriptnode.jsdatabasemongodbmongoose

Troubleshooting: Resolving the error message "SyntaxError: Unexpected token '<'"

I am currently facing an issue with my code that is supposed to use LAT&LONG data saved in a txt file and display it as a Google Map in HTML. However, the PHP function to import the txt file is not working at all. Any suggestions on what might be causi ...

phphtmlgoogle-maps-api-3

Elevation in design ui component

I am having an issue with the height of a theme-ui component I embedded. Even though the console shows it correctly, it is displaying at 100% height. <Embed src={url} sx={{width: '800px', height: '400px'}}/> This embed is contain ...

javascriptcssreactjsnext.jstheme-ui

Create a Discord.js bot that automatically deletes any URLs that are posted in the server

Seeking advice on how to have my bot delete any URLs posted by members. I am unsure of how to accurately detect when a URL has been shared, especially since they can begin with https, www, or some other format entirely. Any insights would be greatly apprec ...

javascriptnode.jsnpmdiscorddiscord.js

Exploring the functionality of $.param in jQuery

After extensive research online, I found that the most helpful information was on the official jQuery site. Here is the code snippet I am currently using: var param = { branch_id : branch_id}; var str = $.param(param); alert(str); However, when I log or ...

javascriptjquery

What is the best way to display a div after a form submission?

I recently added a contact form to my website and successfully set it up so that when the user clicks the contact button, the form pops out. However, instead of redirecting the user to a separate result page after submitting the form, I want a result div ...

phpjavascript

Are there Alternatives for Handling Timeout Exceptions in Selenium WebDriver?

Currently, utilizing Selenium WebDriver with node.js to scrape extensive weather data spanning multiple decades from a site that loads only one day's worth of data per page at full resolution. The process involves navigating between URLs and waiting f ...

javascriptnode.jsseleniumselenium-webdriverwait

What steps are involved in making select fields that change dynamically?

There are two fields available for the user to interact with: size and design. Users have the ability to add more instances of these fields as many times as they desire. Illustration: If I choose M for the size, it will display in the console: https://i ...

javascriptreactjsmaterial-ui

Customize the shadow array values in Material UI themes by utilizing the createMuiTheme function to override default

Currently, I have a customized theme for my toolkit where I am utilizing createMuiTheme to override various properties like palette, fonts, etc. One particular challenge I am facing is in minimizing the shadow array within the theme object which contains 2 ...

javascriptarraysreactjsthemesmaterial-ui

dividing an HTML string into individual variables using JavaScript

How can a string be split in pure JavaScript (without using JQuery/dojo/etc) in the most efficient and straightforward way? For example: var tempString = '<span id="35287845" class="smallIcon" title="time clock" style="color:blue;font-size:14px;" ...

javascripthtml

Choosing a Specific Column within a CSS Grid

Currently, I am trying to figure out a method for selecting columns within a CSS grid. Through the use of the :nth-child() selector, I managed to select a column in a static grid. For instance, in a grid with 3 columns, :nth-child(2) will target every grid ...

javascriptjquerycsscss-grid

Uploading multiple images using AngularJS and Spring framework

I'm encountering an issue with uploading multiple images using AngularJS and Spring MVC. While I can successfully retrieve all the files in AngularJS, when I attempt to upload them, no error is displayed, and the process does not reach the Spring cont ...

javascriptangularjsspring

The integration of PHP code with an HTML form is causing issues

When I use the insert_teacher('bla bla','bla bla','dqsd') function in a PHP file, everything works fine. However, when I try to implement it with an HTML form, nothing is displayed and no data is inserted into my database. &l ...

javascriptphpjqueryhtmlcss

Elements in Bootstrap Container class failing to align properly

Hello Everyone, I am attempting to achieve the same layout as demonstrated in [original image] where the "browse collection" div and the "request brochure" div are aligned with the four items above them. My approach involves using Bootstrap, and I assume ...

htmlcsstwitter-bootstrap

How can I display two slides at once in Ionic 2/3 on a wide screen?

I have been searching for a solution that will allow me to display 1 ion-slide if the device screen is small, but if it's larger, then I want to display 2 ion-slides. Unfortunately, I have not been able to find a suitable solution yet. As an example, ...

javascripthtmltypescriptionic2ionic3