Querying the media for the src attribute of an image

Is there a way to change the image displayed on mobile view without using it as a background image? I want to switch out the image based on screen size using media queries - how can I achieve this?

<div class="item">
    <img src="http://lorempixel.com/1500/600/abstract/1" class="img-responsive">
    <div class="container">
        <div class="carousel-caption">
            <h1>Changes to the Grid</h1>
            <p>Bootstrap 3 still features a 12-column grid, but many of 
                the CSS class names have completely changed.
            </p>
        </div>
    </div>
</div>
htmlcsstwitter-bootstrapmedia-queries

Answer №1

.img-mobile-image {
  display: none;
}

@media (max-width:767px) {
  .img-responsive {
    display: none;
  }
  .img-mobile-image {
    display: block !important;
  }
}
<div class="item">
  <img src="http://lorempixel.com/1500/600/abstract/1" class="img-responsive">
  <img src="mobile-imag-path" class="img-mobile-image">
  <div class="container">
    <div class="carousel-caption">
      <h1>Changes to the Layout</h1>
      <p>Bootstrap 3 introduces a revised grid system with significant changes in CSS classes.</p>
    </div>
  </div>
</div>

Answer №2

To switch between images, you can utilize the classes provided below. Feel free to customize the breakpoint according to your preference.

   .desktop_image {
      display:none;
    }
    @media (min-width: 768px) {
      .mobile_image {
        display: none;
      }
      .desktop_image {
        display: inline;
      }
    }

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 best way to ensure an image fits perfectly within a div container

I'm attempting to design a straightforward card layout where the image spans the entire width of the container div. My vision is for it to resemble something like the example in the linked image below. https://i.sstatic.net/X5oJD.png I experiment ...

htmlcss

Troubleshooting problems with background-image in CSS using Javascript

My latest project involves coding to assign background images to various classes using jQuery. The image files are named in a numerical order, such as 0bg.jpg, 1bg.jpg, 2bg.jpg, and so on. for (i=0; i < 8; i++) { $('.hpCarousel:eq('+i+' ...

javascriptcssbackground-image

Tips for adding radio buttons within an alert box

When a table is generated based on user input, I want to find the cell index when it is clicked. My goal is to create an alert with radio buttons that appears when a cell is clicked. However, my attempt to implement this feature has encountered an issue. ...

javascriptjqueryhtml

Display the current date on a webpage using a Google calendar integration

I am struggling to display only today's events in my HTML output using this code. When I remove the line "if ($date = date("Y-m-d")){", the code shows a specific number of events. How can I modify the code to show all events that occur on a single day ...

phphtmldatecalendar

How can I achieve a similar layout in my .cshtml file?

https://i.sstatic.net/f1C0G.png Hey there, I'm looking to achieve a layout similar to the one shown in the image. Specifically, I want the left side panel to remain unchanged when expanding the Accordion control on the right side. Can someone guide ...

htmlcss.nettwitter-bootstrapmodel-view-controller

Using JavaScript to access a button from a dropdown list in ASP.NET MVC

I'm trying to use a JavaScript function to trigger the click event of an HTML button when a drop-down list is changed. However, it seems like the correct id is not being found. @using (Ajax.BeginForm("GetReport", "Choices", new AjaxOptions() { ...

javascriptjqueryhtmlasp.netasp.net-mvc

What is the best way to ensure that all background images are displayed in IE when printing?

I am currently working on formatting a page for printing in Internet Explorer. I have encountered an issue where when I select the "Print background and images" option in Page Setup and preview the page, only certain icons are displaying. However, all icon ...

htmlcssinternet-explorerprinting

Responsive width is applied to the first div, while a fixed width is set for the second div in

Is there a way to create this specific layout using CSS? It seems like a simple design, but I'm struggling with the coding. The red div will display an image advertisement and will always be 350px wide, positioned on the right side of the page. The gr ...

htmlcss

Personalizing the message displayed by the PHP exit function

My goal is to enhance the appearance of the message page produced by the PHP exit function for a better user experience. At the moment, all that is visible is a blank, white screen. Is there a way to customize this page to include a personalized message, ...

phpcss

"Exploring the process of making Ajax calls to a specific URL using a

Hello there! I'm currently working on a project where I need to retrieve data without refreshing the page. Below is my ajax code: function fetchData() { $.ajax({ type: "post", cache: false, url: "test2.php", success: (function (resu ...

javascriptphpjqueryhtmlajax

Using ReactJS to create cross-browser inline styling with flexbox

I'm currently working on a React web application that relies heavily on inline styling. My goal is to ensure compatibility with the latest versions of major browsers (Safari, Chrome, Firefox, IE) while utilizing flexbox for layout. The issue I encou ...

javascripthtmlcssreactjsflexbox

adjusting the width of an HTML table cell

I'm struggling with the code below: <table> <thead> <th class='1'>Date</th> <th class='2'>Start Time</th> <th class='3'>End Time </th> <th class='4 ...

htmlcss

The CSS selector functions as expected when used in a web browser, however, it

While conducting test automation using Selenium, I typically rely on css selectors to find elements. However, I recently came across a peculiar issue. I observed that in certain cases, the css selector works perfectly when tested in the browser console. Fo ...

javascriptjquerycssseleniumcss-selectors

The HTML Email Template fails to incorporate certain CSS styles

When attempting to create an HTML Email template that includes a button with a link and has a maximum width with consistent margins on both sides, I encountered some issues. While certain parts of the CSS were applied correctly, others were not displaying ...

htmlcssemail

When an anchor surrounds a div tag, white borders will appear

Lately, I've encountered an unusual issue. My buttons are created using div tags with rounded edges and border colors defined in the CSS. To link them to specific destinations, I encapsulated them within <a> tags. The problem arises when the li ...

cssjoomlagoogle-chrome

Organizing Checkbox Groups for Validation in Bootstrap

My form consists of 2 checkboxes and I only want to submit the form if at least one checkbox is checked. The current code requires both checkboxes to be checked, but I tried grouping them using the name attribute without success. How can I group checkbox ...

javascripthtmlvalidationcheckboxbootstrap-4

Elements within the Div are perfectly aligned in the center and restricted from moving to either the left or right edges of the

Currently, I am developing a project similar to Gmail. In order to achieve this, I need to design a div container that consists of various components such as Inbox, Send, Draft, etc. However, when I attempt to move these components around, the icons disapp ...

cssreactjsreact-hooks

use ajax to selectively update specific element

Seeking assistance with updating the cart page using ajax when adjusting the quantity of products. The view logic seems to be functioning correctly. The issue arises when targeting the class "ajax_updater". Upon clicking the quantity buttons, ajax succes ...

javascripthtmldjangoajaxdom

Icon from Bootstrap disappears when button text is modified

Recently, I made a modification to incorporate an icon into a button as shown below: Original Button Design However, once a user adds an item to the cart, the button transforms into Updated Button Appearance In my efforts to dynamically update the text ...

javascripthtmlbootstrap-4

transition effect on div inside a link element upon hovering

My navigation menu currently looks like this: <nav> <ul> <li> <a href="#">About</a> <div style="background-color: #c03546;height: 10px;"></div> </li> <li> ...

htmlcss