Scaling inline SVG with preserveAspectRatio
How do I make an scaling inline svg with preserveaspectratio?
What is a scaling inline svg with preserveaspectratio? How do you make a scaling inline svg with preserveaspectratio? This script and codes were developed by Taylor Hunt on 29 September 2022, Thursday.
Scaling inline SVG with preserveAspectRatio - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scaling inline SVG with preserveAspectRatio</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <figure> <div class="wrapper-a"> <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid"> <image xlink:href="http://placehold.it/400x400" x="0" y="0" width="400" height="400" /> </svg> </div> <figcaption>This wrapper <code><div></code> is 300 by 200 pixels.</figcaption>
</figure>
<figure> <div class="wrapper-b"> <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid"> <image xlink:href="http://placehold.it/400x400" x="0" y="0" width="400" height="400" /> </svg> </div> <figcaption>This wrapper <code><div></code> is instead 200 by 300 pixels.</figcaption>
</figure>
</body>
</html>
Scaling inline SVG with preserveAspectRatio - Script Codes CSS Codes
svg { width: 100%; height: 100%;
}
div { background: grey; }
.wrapper-a { height: 300px; width: 200px; }
.wrapper-b { height: 200px; width: 300px; }
figure { float: left; }
figcaption { margin-top: 1em; }
Developer | Taylor Hunt |
Username | tigt |
Uploaded | September 29, 2022 |
Rating | 3 |
Size | 1,692 Kb |
Views | 16,192 |
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!
Name | Size |
Halftone button | 3,257 Kb |
More robust SVG text demo | 1,929 Kb |
Hiding inline SVG from older browsers with CSS namespaces | 1,836 Kb |
Scaling inline SVG with object-fit | 1,668 Kb |
Cross-Browser data URI encoding test | 2,374 Kb |
A universal technique that might help the blank white page transition be less jarring | 1,710 Kb |
Tabs without JavaScript... or CSS | 1,585 Kb |
SVG Coloring Book | 24,214 Kb |
CSS Scroll thumb autosizing | 2,278 Kb |
Deuteragonist Image | 2,909 Kb |
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!
Name | Username | Size |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Process Accordion | Devilskitchen | 31,432 Kb |
Sticky div | Kaslab | 2,225 Kb |
Form Labels | Bartuc | 2,717 Kb |
A Pen by Rob Levin | Roblevin | 2,787 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Board Site | IndianaLuft | 10,542 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!