Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Within a specific folder structure, I have a collection of images designated for both desktop and mobile displays:

img:
    img-1.png
    img-2.png
    img-3.png
    img-4.png
    img-5.png
    img-6.png

img/mobile:
        img-1.png
        img-2.png
        img-3.png
        img-4.png
        img-5.png
        img-6.png

To switch the desktop image img-1.png, I currently use this code:

<span id="switcher">
   <img id="houdini" src="img/img-1.jpg" alt="">
</span> 

<span id="switcher2">
   <img id="houdini2" src="img/img-2.jpg" alt="">
</span>

<span id="switcher3">
   <img id="houdini3" src="img/img-3.jpg" alt="">
</span>

<span id="switcher4">
   <img id="houdini4" src="img/img-4.jpg" alt="">
</span>

<span id="switcher5">
   <img id="houdini5" src="img/img-5.jpg" alt="">
</span>

Regarding CSS:

@media only screen and (max-device-width: 489px) {
    span[id=switcher] {
        display:block;
        background-image: url(/mobile/img-1.jpg);
        background-repeat: no-repeat;
        background-position: center;
    }
    img[id=houdini] {display: none;}
}

Is there a way to streamline writing the above CSS for all images from img-1 to img-6? Can an ID be passed or accessed?

Can we eliminate the use of !important in the code?

(Need compatibility with IE8)

imagecssresponsive-designsass

Answer №1

Why not try a different approach for displaying images on desktop? You can have pairs of images for desktop and mobile side by side, toggling their visibility using specific classes:

Check out this example

<img src="http://placehold.it/200/f30" alt="houdini" class="visible-mobile">
<img src="http://placehold.it/200/3f0" alt="houdini" class="hidden-mobile">

.visible-mobile {
  display: none !important;
}

@media (max-width: 489px) {
  .visible-mobile {
    display: inline !important;
  }

  .hidden-mobile {
    display: none !important;
  }
}

Answer №2

<picture>

  <source srcset="https://uniquewebsite.com/images/devices/new-imac.png" media="(min-width: 1000px)">
  <source srcset="https://uniquewebsite.com/images/devices/new-macbook-grey-front.png" media="(min-width: 500px)">
  <source srcset="https://uniquewebsite.com/images/devices/new-iphone6plus-spacegrey-portrait.png" media="(max-width: 500px)"> 

  <img src="https://uniquewebsite.com/images/devices/new-macbook-grey-front.png" alt="Unique Tech Product" id="unique-image" class="unique_image" style="max-width: 100vw; max-height: 100vh;">

</picture>

For a unique look, consider using min-device-width and/or max-device-width to prevent image changes upon browser resize. Give it a try!

Answer №3

You have the ability to dynamically manipulate it

$('body').append("<style type='text/css' id="+uniqueid+">@media screen and (max-device-width: 489px) { span[id="+uniqueid+"] {/* styles */ } }</style>");

To delete the style

$('#uniqueid').detach();

Alternatively

$('#uniqueid').remove();

Answer №4

<span id="flipper" class="myflip">
   <img id="merlin" src="img/img-1.jpg" alt="">
</span>

<span id="flipper2" class="myflip">
   <img id="merlin2" src="img/img-2.jpg" alt="">
</span>

<span id="flipper3" class="myflip">
   <img id="merlin3" src="img/img-3.jpg" alt="">
</span>

<span id="flipper4" class="myflip">
   <img id="merlin4" src="img/img-4.jpg" alt="">
</span>

<span id="flipper5" class="myflip">
   <img id="merlin5" src="img/img-5.jpg" alt="">
</span>

CSS = 

  @media only screen and (max-device-width: 489px) {
    span.myflip {
      display:block;
      background-image: url(/mobile/img-1.jpg) !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
    }
    img[id=merlin] {display: none !important;}
  }

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 term for the visual display of a product through a photo gallery or slideshow?

Can someone help me identify what the item I'm looking for? You can click on the link to see an example of the product: sephora product example What is the technical term for the section that contains product pictures and slides? Are there any librar ...

jqueryhtmlcssbootstrap-4

Seeking help with a problem regarding the Tooltip Effect not displaying over a button

I'm currently struggling with implementing a tooltip for the "Back-end" button on my webpage. Despite my efforts, the tooltip effect fails to display over the button, and I'm at a loss as to why. Below is the code snippet I am working with: < ...

htmlcsstooltipeffect

In Firefox, certain scroll positions cause elements to vanish

I've been struggling with a peculiar bug that I can't seem to fix. The issue arises in Firefox when scrolling on a MacBook Pro 2019 15" at 1680x1050 resolution - product elements (not just images) begin to flicker. I have recorded a video of th ...

htmlcssmacosfirefoxdesktop

The Bootstrap nav-tab functions perfectly on a local server, but unfortunately does not work when hosted remotely

UPDATE: Issue resolved so I have removed the Github link. It turns out that Github pages require a secure https connection for all linked scripts. Always remember to check the console! I encountered an unusual bug where the Bootstrap nav-tab functionality ...

javascriptjqueryhtmlcss

Arrange text boxes within a form and table to be in alignment with the labels

https://i.stack.imgur.com/MFQnD.png I'm facing difficulty aligning checkboxes with labels within a form and a table. Despite reviewing various answers and websites, I am still unable to achieve the desired alignment. How to consistently align check ...

htmlcsscheckboxlabel

Combining Bootstrap Vue: utilizing class names alongside HTML tags

(Bootstrap-Vue 2.0, Vue.js 2.5) Is it possible to combine traditional CSS Bootstrap 4 classes with Bootstrap-Vue? For example, can I use the following code snippet: <section id="introduction"> <b-container class="h-100"> & ...

cssvue.jsbootstrap-4bootstrap-vue

Choose solely the initial and concluding hyperlink within the divs

The structure I am working with is as follows: <div class="navigation_sub_item_background" id="sub_nav_2"> <div class="navigation_sub_item" id="2_1"> <a class="navigation__sub__link" href="?p=2_1"> <span> ...

htmlcsscss-selectors

The appearance of a <div> element results in a border being applied to a different element

When hovering between the two borders, an undesirable (albeit very small) border appears around them. Can anyone assist me with this issue and explain why it is happening? I have attempted to set a transparent border on each element but without success. R ...

htmlcssbordertransition

Challenges with resizing floating divs

As a beginner in Web Development, I am tasked with creating a web portfolio for an assignment. In my design layout, I have a navigation bar in a div floated left, and a content div floated right serving as an about me section containing paragraphs and lis ...

htmlcsscss-floatwindow-resize

Attention: The upload index is not defined

I encountered an issue with my application where users can report bugs. The problem lies in the fact that although data is being stored in the database, the images are not being saved correctly. Upon checking the 'uploads' folder, I noticed that ...

phpmysqlimagesaveundefined

How can I make a 100vh div stick to the screen?

Is there a way to fix a Google map in a div to the screen so that the map on the left side remains fixed while the content on the right side can scroll? I've tried using position:fixed but it doesn't seem to be working. See the pictures below for ...

htmlcss

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...

javascriptjqueryhtmlcssslide

Hover Effects on Facebook Tabs

I am currently facing an issue with implementing CSS-sprite for image-based rollovers within a Facebook Tab page. Strangely, the background images are getting removed by Facebook only when inside a Tab page and not in the main application itself. It seems ...

cssfacebookcss-sprites

Using Font Awesome Icons and Bootstrap to Enhance Google Maps Info Bubble?

I'm currently working on customizing links within a Google Maps info-bubble using Bootstrap and font awesome Icons. Successfully integrated a list-group from bootstrap for my links in the info bubble, but running into issues when trying to include a ...

htmlcssgoogle-mapsbootstrap-4font-awesome

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

htmlcss

Personalizing the Navigation Bar

I am in the process of designing the navigation bar for my website that will work seamlessly on both desktop and mobile devices. To view my progress so far, check out this JS Fiddle link Here is the HTML code I have created: <div class="container-flu ...

htmlcssbootstrap-4

Tips for customizing the appearance of Java FX TableView column headers with CSS

I am relatively new to JavaFX and delving into CSS stylesheets, as well as using stackoverflow. I am curious about how one can customize the styling of a table column header. This is what my current column header looks like: Current appearance of my table ...

cssjavafxtableviewcolumnheader

What are some strategies to avoid render-blocking when CSS is loaded through HTML Imports?

I am in the process of developing a website using Web Components and Polymer, with assets being loaded through HTML Imports. This is an example of my markup: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8> < ...

csspolymerweb-componentpagespeedhtml-imports

Article with content surpassing the boundary of its parent container

I'm struggling to contain text within the parent's div as it keeps overflowing. I attempted using element.style { text-overflow: ellipsis; overflow: hidden; } but unfortunately, it didn't work. Take a look here at my JSFiddle link. It ...

htmlcss

Unable to apply the CSS styles on the webpage

I'm having trouble adjusting the CSS for a specific div with the class .cropper inside a component named image-cropper, and I can't figure out why it's not taking effect. Here is an image of the particular div. Below is the CSS code I atte ...

htmlcssangular