Object-fit cover

Developer
Camilla Knap
Size
2,249 Kb
Views
12,144
  1. Object-fit cover Previews
  2. Object-fit cover HTML Codes
  3. Object-fit cover CSS Codes

How do I make an object-fit cover?

What is a object-fit cover? How do you make a object-fit cover? This script and codes were developed by Camilla Knap on 29 November 2022, Tuesday.

Object-fit cover Previews
IQ Test

Object-fit cover - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>object-fit cover</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrap1"><img src="http://dummyimage.com/800x800/000/fff&amp;text=object-fit: cover;"/></div>
<div class="wrap2"><img src="http://dummyimage.com/800x800/000/fff&amp;text=position: absolute;"/></div>
<div class="wrap3" style="background-image: url('http://dummyimage.com/800x800/000/fff&amp;text=background: cover;')"> </div>
</body>
</html>

Object-fit cover - Script Codes CSS Codes

div { margin-bottom: 10px;
}
.wrap1 { height: 300px; width: 50%;
}
.wrap1 > img { object-fit: cover; display: block; width: 100%; height: 100%;
}
.wrap2 { position: relative; overflow: hidden; height: 300px; width: 50%;
}
.wrap2 > img { position: absolute; left: -9999px; right: -9999px; top: -9999px; bottom: -9999px; margin: auto; min-width: 100%; min-height: 100%;
}
.wrap3 { height: 300px; width: 50%; background-size: cover; background-position: center center;
}
Object-fit cover - Script Codes
Object-fit cover - Script Codes
Home Page Home
Developer Camilla Knap
Username clknap
Uploaded November 29, 2022
Rating 3
Size 2,249 Kb
Views 12,144
Do you need developer help for Object-fit cover?

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!

Camilla Knap (clknap) Script Codes
Name
Flexbox testing margin auto compared to flex-grow
A Pen by Camilla Knap
Input label placeholder animation
Css3 loader
Responsive table styling
Morph content
CSS only accordion
Input label animation
Checkbox tag
A Pen by Camilla Knap
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!