The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> can media queries be used to exchange 3 images, I am attempting to use responsive html to show 1 of 3 images
derekweaver
post Nov 29 2020, 12:40 PM
Post #1





Group: Members
Posts: 8
Joined: 29-November 20
Member No.: 27,657



I may be trying to do something that is not feasible. I would like to exchange an image three times. The image is my logo, and I have a logo_450 450px size which contains 6 lines of text, a logo_600 600px size which contains 4 lines of text, and logo 750px size which contains two line of text.

I tried <img srcset> but that appears to be only for the same image in separate resolutions.

I am now using <picture> <source media> and trying to use min max width for the 600 px.

Yet, all that this does is give me the 450 and 750 px image at the break points.

Is what I am trying to do possible with html and css exclusively?

<picture>
<source media="(max-width:450px)" srcset="logo_450.png">
<source media="(min-width:451px) and (max-width=800px)" srcset="logo_600.png">
<img src="logo.png" alt="Curious Oddities of Skin and Bones, with logo of a skull">
</picture>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 29 2020, 01:25 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yes, with CSS animations. Look at "Demo with multiple images" at this page.
http://css3.bradshawenterprises.com/cfimg/
(I don't know if that site is good, just the first example I found).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 06:51 PM