Scaling inline SVG with object-fit
How do I make an scaling inline svg with object-fit?
What is a scaling inline svg with object-fit? How do you make a scaling inline svg with object-fit? This script and codes were developed by Taylor Hunt on 29 September 2022, Thursday.
Scaling inline SVG with object-fit - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scaling inline SVG with object-fit</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"> <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"> <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 object-fit - Script Codes CSS Codes
svg { object-fit: contain; width: 100%; height: 100%; max-width: 100%; max-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,668 Kb |
Views | 12,144 |
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 |
Weird Animals | 4,232 Kb |
Scaling inline SVG with the stretcher-bar technique | 1,853 Kb |
CSS Scroll thumb autosizing | 2,278 Kb |
Tabs without JavaScript... or CSS | 1,585 Kb |
SVG Coloring Book | 24,214 Kb |
Favicon download test | 1,242 Kb |
Cross-Browser data URI encoding test | 2,374 Kb |
Filtered background with fallback for legibility | 2,838 Kb |
Logic in CSS with animation-name and custom properties | 1,943 Kb |
A universal technique that might help the blank white page transition be less jarring | 1,710 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 |
Canvas Fireworks | Jackrugile | 6,200 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Retina canvas w. resize | Erikterwan | 1,882 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Masonry | Uriuriuriu | 5,005 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Portfolio Landing Page | FDfranklin | 3,585 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Animated css matrix type | NielsOeltjen | 3,484 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!