Javascript to fit contents

Javascript js fit window to content code example

Example 1: fullscreen, We make the canvas Example 2: fullscreen canvas, three.js makes the canvas Example 3: inline canvas Example 4: 50% width canvas (like a live editor) notice and are never referenced in the code above and yet it works for all cases.Here is the working JSFiddle Solution 3: Fullpage responsive canvas The best way to resize in response to a window resize is in the animation loop rather than on the window event that can fire at a rates over the 60FPS of the DOMs refresh rate.

Js fit window to content

js fit window to content

/* fit the window size to match the content wrapper */ function fitWindow2Content( contentWrapper ) < // calculate necessary change in window's width var width = window.innerWidth - contentWrapper.clientWidth; // calculate necessary change in window's height var height = window.innerHeight- contentWrapper.clientHeight; // resize window to fit content window.resizeBy( -width , -height ); >

Js fit window to content Code Example, xxxxxxxxxx. 1. /* fit the window size to match the content wrapper */. 2. function fitWindow2Content( contentWrapper ) <. 3. 4. // calculate necessary change in window's width. 5.

Canvas height to fit content

You can rely on contentContainerNode.offsetHeight

var canvas = document.getElementById('canvasPaper') var contentContainerNode = document.getElementById('myContentContainer') canvas.height = contentContainerNode.offsetHeight 

Js fit window to content Code Example, Get code examples like «js fit window to content» instantly right from your google search results with the Grepper Chrome Extension.

Resizing canvas/webgl to fit screen width and heigh

The other answers are all very sad. They are all fighting the browser instead of cooperating with it.

Arguably the best way to resize three.js use to code it so it just accepts whatever size the canvas is as set by CSS. That way, no matter how you use the canvas your code will work, no need to change it for different situations.

First off when setting the initial aspect ratio there’s no reason to set it because we’re going to set it in response to the size of the canvas being different so it’s just a waste of code to set it twice

// There's no reason to set the aspect here because we're going // to set on resize anyway const camera = new THREE.PerspectiveCamera(70, 1, 1, 1000); 

Then we need some code that will resize the canvas to match its display size

function resizeCanvasToDisplaySize(force) < const canvas = renderer.domElement; // look up the size the canvas is being displayed const width = canvas.clientWidth; const height = canvas.clientHeight; // adjust displayBuffer size to match if (force || canvas.width !== width || canvas.height !== height) < // you must pass false here or three.js sadly fights the browser renderer.setSize(width, height, false); camera.aspect = width / height; camera.updateProjectionMatrix(); // update any render target sizes here >> 

Call this in your render loop and once at init time

function animate(time) < time *= 0.001; // seconds resizeCanvasToDisplaySize(); mesh.rotation.x = time * 0.5; mesh.rotation.y = time * 1; renderer.render(scene, camera); requestAnimationFrame(animate); >resizeCanvasToDisplaySize(true); requestAnimationFrame(animate); 

For fullscreen this is all the css needed

Here’s 4 examples, the only difference between the examples is the CSS and whether we make the canvas or three.js makes the canvas. No other code changes.

Example 1: fullscreen, We make the canvas

"use strict";const renderer = new THREE.WebGLRenderer();// There's no reason to set the aspect here because we're going // to set it every frame any const camera = new THREE.PerspectiveCamera(70, 1, 1, 1000); camera.position.z = 400;const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry(200, 200, 200); const material = new THREE.MeshPhongMaterial(< color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading >);const mesh = new THREE.Mesh(geometry, material); scene.add(mesh);const light1 = new THREE.PointLight(0xff80C0, 2, 0); light1.position.set(200, 100, 300); scene.add(light1);function resizeCanvasToDisplaySize(force) < const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; if (force || canvas.width !== width ||canvas.height !== height) < // you must pass false here or three.js sadly fights the browser renderer.setSize(width, height, false); camera.aspect = width / height; camera.updateProjectionMatrix(); // set render target sizes here >>function animate(time) < time *= 0.001; // seconds resizeCanvasToDisplaySize(); mesh.rotation.x = time * 0.5; mesh.rotation.y = time * 1; renderer.render(scene, camera); requestAnimationFrame(animate); >resizeCanvasToDisplaySize(true); requestAnimationFrame(animate);

Example 2: fullscreen canvas, three.js makes the canvas

"use strict";const renderer = new THREE.WebGLRenderer(); document.body.appendChild(renderer.domElement);// There's no reason to set the aspect here because we're going // to set it every frame any const camera = new THREE.PerspectiveCamera(70, 1, 1, 1000); camera.position.z = 400;const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry(200, 200, 200); const material = new THREE.MeshPhongMaterial(< color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading >);const mesh = new THREE.Mesh(geometry, material); scene.add(mesh);const light1 = new THREE.PointLight(0xff80C0, 2, 0); light1.position.set(200, 100, 300); scene.add(light1);function resizeCanvasToDisplaySize(force) < const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; if (force || canvas.width !== width ||canvas.height !== height) < // you must pass false here or three.js sadly fights the browser renderer.setSize(width, height, false); camera.aspect = width / height; camera.updateProjectionMatrix(); // set render target sizes here >>function animate(time) < time *= 0.001; // seconds resizeCanvasToDisplaySize(); mesh.rotation.x = time * 0.5; mesh.rotation.y = time * 1; renderer.render(scene, camera); requestAnimationFrame(animate); >resizeCanvasToDisplaySize(true); requestAnimationFrame(animate);

"use strict";const renderer = new THREE.WebGLRenderer();// There's no reason to set the aspect here because we're going // to set it every frame any const camera = new THREE.PerspectiveCamera(70, 1, 1, 1000); camera.position.z = 400;const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry(200, 200, 200); const material = new THREE.MeshPhongMaterial(< color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading >);const mesh = new THREE.Mesh(geometry, material); scene.add(mesh);const light1 = new THREE.PointLight(0xff80C0, 2, 0); light1.position.set(200, 100, 300); scene.add(light1);function resizeCanvasToDisplaySize(force) < const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; if (force || canvas.width !== width ||canvas.height !== height) < // you must pass false here or three.js sadly fights the browser renderer.setSize(width, height, false); camera.aspect = width / height; camera.updateProjectionMatrix(); // set render target sizes here >>function animate(time) < time *= 0.001; // seconds resizeCanvasToDisplaySize(); mesh.rotation.x = time * 0.5; mesh.rotation.y = time * 1; renderer.render(scene, camera); requestAnimationFrame(animate); >resizeCanvasToDisplaySize(true); requestAnimationFrame(animate);

 
Pretend this is a diagram in a physics lesson and it's inline. Notice we didn't have to change the code to handle this case. 

Example 4: 50% width canvas (like a live editor)

"use strict";const renderer = new THREE.WebGLRenderer();// There's no reason to set the aspect here because we're going // to set it every frame any const camera = new THREE.PerspectiveCamera(70, 1, 1, 1000); camera.position.z = 400;const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry(200, 200, 200); const material = new THREE.MeshPhongMaterial(< color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading >);const mesh = new THREE.Mesh(geometry, material); scene.add(mesh);const light1 = new THREE.PointLight(0xff80C0, 2, 0); light1.position.set(200, 100, 300); scene.add(light1);function resizeCanvasToDisplaySize(force) < const canvas = renderer.domElement; const width = canvas.clientWidth; const height = canvas.clientHeight; if (force || canvas.width !== width ||canvas.height !== height) < // you must pass false here or three.js sadly fights the browser renderer.setSize(width, height, false); camera.aspect = width / height; camera.updateProjectionMatrix(); // set render target sizes here >>function animate(time) < time *= 0.001; // seconds resizeCanvasToDisplaySize(); mesh.rotation.x = time * 0.5; mesh.rotation.y = time * 1; renderer.render(scene, camera); requestAnimationFrame(animate); >requestAnimationFrame(animate);

html < box-sizing: border-box; >*, *:before, *:after < box-sizing: inherit; >body < margin: 0; >.outer < >.frame < display: flex; width: 100vw; height: 100vh; >.frame>* < flex: 1 1 50%; >#editor < font-family: monospace; padding: .5em; background: #444; color: white; >canvas

notice window.innerWidth and window.innerHeight are never referenced in the code above and yet it works for all cases.

Why not use the resize event? Because there are situations where you’ll get no resize event even though the canvas changes size. For example if you’re making a 2 column editor and you can draw the divider between the 2 columns. Or if your canvas is scaling based on content near by. In either case there will be no resize event.

This is because, the renderer­ ‘s width and height are always being fixed, and are not changing when the browser window is resized.

To resolve this, you need to reset renderer­ ‘s width and height on window resize, which you could do like this .

window.addEventListener('resize', function() < renderer.setSize(window.innerWidth, window.innerHeight); >); 

Here is the working JSFiddle

Fullpage responsive canvas

The best way to resize in response to a window resize is in the animation loop rather than on the window resize event that can fire at a rates over the 60FPS of the DOMs refresh rate. This will make the resize more efficient especially if the window is being resized by a mouse.

You can set the canvas to be positioned absolutely

function animate() < if(renderer.domElement.width !== innerWidth || renderer.domElement.height !== innerHeight) < // last arg stops Three from setting canvas.style width and height properties renderer.setSize(innerWidth,innerHeight,false); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); > // render your scene // next frame requestAnimationFrame(animate); > 

JavaScript Window, The window object is supported by all browsers. It represents the browser’s window. All global JavaScript objects, functions, and variables automatically become members of the window object. Global variables are properties of the window object. Global functions are methods of the window object. Even the … Usage examplewindow.document.getElementById(«header»);Feedback

Источник

Style objectFit Property

Cut off the sides of an image, preserving the aspect ratio, and fill in the space:

Description

The objectFit property is used to specify how an or should be resized to fit its container.

This property tells the content to fill the container in a variety of ways; such as «preserve that aspect ratio» or «stretch up and take up as much space as possible»

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Syntax

Return the objectFit property:

Set the objectFit property:

Property Values

Value	Description
fill	This is default. The replaced content is sized to fill the element’s content box. If necessary, the object will be stretched or squished to fit
contain	The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box
cover	The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. The object will be clipped to fit
none	The replaced content is not resized
scale-down	The content is sized as if none or contain were specified (would result in a smaller concrete object size)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	fill
Return Value:	A String, representing the object-fit of an element
CSS Version	CSS3

Источник