Scale To Fit

Developer
Lukejacksonn
Size
2,342 Kb
Views
12,144
  1. Scale To Fit Previews
  2. Scale To Fit HTML Codes
  3. Scale To Fit CSS Codes
  4. Scale To Fit JS Codes

How do I make an scale to fit?

Scale content to remain inside the bounds of its parent whilst maintaining aspect ratio.. What is a scale to fit? How do you make a scale to fit? This script and codes were developed by Lukejacksonn on 30 November 2022, Wednesday.

Scale To Fit Previews
IQ Test

Scale To Fit - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Scale To Fit</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>CSS Scale content to fit inside the bounds of its parent whilst maintaining some aspect ratio.</p>
<hr />
<div> <iframe src="http://lukejacksonn.com" frameborder="0"></iframe>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Scale To Fit - Script Codes CSS Codes

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { width: 100vw; height: 100vh; display: flex; flex-flow: column nowrap; font-family: "Helvetica", sans-serif; background: #ba68c8;
}
div { flex: 100%; width: 100%; overflow: hidden; display: flex; flex-flow: column nowrap; align-items: center; justify-content: center;
}
iframe { min-width: 800px; min-height: 500px; background: #fff;
}
p { display: block; padding: 3rem; max-width: 480px; color: #fff; text-align: center; margin: 0 auto; line-height: 150%;
}
hr { width: 90%; opacity: 0.5;
}

Scale To Fit - Script Codes JS Codes

$(function() { // fitInParent jQuery Plugin // https://github.com/lukejacksonn $.fn.fitInParent = function(boost) { boost = boost || 1; return this.each(function() { var $elem = $(this); var $parent = $elem.parent(); var xscale = $parent.width() / $elem.outerWidth()*boost; var yscale = $parent.height() / $elem.outerHeight()*boost; var scale = xscale > yscale ? yscale : xscale; $elem.css('transform','scale(' + scale + ')'); }); };
})
// Window resize listener
// Fits element to parent when viewport resizes
$(window).resize(function() { $('iframe').fitInParent(0.8);
});
// Iframe load listener
// Fits element to parent when iframe loads
$('iframe, window').load(function() { $(this).fitInParent(0.8);
});
Scale To Fit - Script Codes
Scale To Fit - Script Codes
Home Page Home
Developer Lukejacksonn
Username lukejacksonn
Uploaded November 30, 2022
Rating 3
Size 2,342 Kb
Views 12,144
Do you need developer help for Scale To Fit?

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!

Lukejacksonn (lukejacksonn) Script Codes
Name
Responsive Slider
Favorite Heart
Peeky Password
Perspective Generator
Sliding Drawers
Springy Select
Pinger
Complex Flexbox Layouts
Hero Flex-list
Flexbox Masonry
Create amazing blog posts 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!