Responsive Image through CSS

Developer
Oliver Schafeld
Size
2,240 Kb
Views
20,240
  1. Responsive Image through CSS Previews
  2. Responsive Image through CSS HTML Codes
  3. Responsive Image through CSS CSS Codes
  4. Responsive Image through CSS JS Codes

How do I make an responsive image through css?

CSS only solution for responsive images (swapping high/low resolution images depending on viewport width). Inspired by: . What is a responsive image through css? How do you make a responsive image through css? This script and codes were developed by Oliver Schafeld on 05 October 2022, Wednesday.

Responsive Image through CSS Previews
IQ Test

Responsive Image through CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Image through CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="demo-box"> <span class="magik-responsive-image" id="image-01"> <img src="http://dummyimage.com/400x300/cdcdcd/000/?text=low resolution"> <style scoped> @media screen and (min-width: 801px){#image-01{background-image:url('http://dummyimage.com/800x600/ababab/000/?text=high resolution > 800px');}} </style> </span>
</div> <script src="js/index.js"></script>
</body>
</html>

Responsive Image through CSS - Script Codes CSS Codes

.magik-responsive-image { background-repeat: no-repeat; background-size: 100%; display: block; position: relative;
}
.magik-responsive-image img { max-width: 100%;
}
/* min-width was 601px, although image is 800px wide */
@media screen and (min-width: 801px) { .magik-responsive-image img{ opacity: 0; }
}
/* demo code */
.demo-box { margin: 0 auto; width: 50%;
}

Responsive Image through CSS - Script Codes JS Codes

/*
Resize Window to see effect.
Responsive Images purely through CSS, i.e. without Javascript
Original Inspiration/Source:
http://jsfiddle.net/magikMaker/R6kDT/
http://bjorn.wikkeling.com/115/pure-css-responsive-images-yes-javascript.html
Caveat: The scoped attribute of the <style> tag lacks support in major browsers yet. This demands for an id to be used.
*/
Responsive Image through CSS - Script Codes
Responsive Image through CSS - Script Codes
Home Page Home
Developer Oliver Schafeld
Username schafeld
Uploaded October 05, 2022
Rating 3
Size 2,240 Kb
Views 20,240
Do you need developer help for Responsive Image through CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Oliver Schafeld (schafeld) Script Codes
Name
HTML5 Canvas Test 1
Input Button Plus Minus
Special Characters
Date Picker
Sass Cheat Sheet
Walking Bot - Udacity CS255
2-column, Flex-box menu fly-out
A Pen by Oliver Schafeld
Flyout menu using target pseudo-element
Test cs255-unit 0-quiz 5
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!