JSFiddle: https://jsfiddle.net/vt63Lxf7/4/
I'm using PaperJS on a canvas with resize specified.
<canvas id="mycanvas" resize>
Also, the canvas is set in CSS to have width/height of 100%:
#mycanvas {
width: 100%;
height: 100%;
}
The drawing is circles that depend on the current width/height of the canvas. If you try resizing the JSFiddle render panel, both horizontally and vertically, the drawing is supposed to grow/shrink proportionally, but that is not happening. The only way to get a new proportional drawing is to refresh the browser on the new JSFiddle render panel.
I verified in Chrome's DevTools that as you drag the JSFiddle canvas, its Width/Height changes accordingly, so PaperJS isn't picking up the new canvas size.
Related
I need to use a dialog box to display a relatively large set of images to the user.
I want this image to be scaled when it exceeds the size of the dialog, but in any case no scrollbars should appear. And the image should be centered both horizontally and vertically in the main section of the dialog.
In normal html, I know that this can be set in two ways.
.img {
max-height: 100%;
max-width: 100%;
}
or
.img {
object-fit: scale-down;
}
However, since Quasar's Dialog Plugin doesn't seem to have a defined size, max-height doesn't have an effect.
You can reproduce this problem by reducing the height of the output window. When you drag the height to very small, a scroll bar appears on the dialog box.
How do I adjust it to achieve what I need?
The The code that I tried is here:
https://codepen.io/sshxmz/pen/vYryeWR
I have a gallery (responsiveslides.js) that is launched within a jquery mobile popup that overlays the window. The desired look is to have the gallery scale based on the browser window.
Here is a stripped down working example of my setup and issue: https://jsfiddle.net/02ds2trp/
What I'm trying to accomplish is to have the popup div height match the scaled image. The blue background is ok on the sides of the image but I don't want it on the bottom/top. ie. the orange border should be tight to the image. Also the popup div shouldn't grow more then 70% of the screen.
Right now I have .popupGalleryBannerDIV with height:70% but that is growing it too big, removing that makes the image gallery have no height.
.popupGalleryBannerDIV {
position: fixed;
width: 100%;
background: #2795EE;
top: 15%;
left: 0px;
height: 70%; /* how to I make this dynamic? */
max-height: 70%;
}
Note: I've been playing with this for a week so some css markup on fiddle might be from failed attempts.
I'm having trouble figuring out how to make this work any help would be appreciated.
Edit:
Add some picture to help understand what I'm trying to do.
View post on imgur.com
Part of the problem, is that your slide is using a background image which has no default height/width on it's own. It's the content that dictates how much space should be filled up.
My suggestion is to use an tag instead or have some js function that will appropriately size the viewport height to match the image's ratio based on the viewport width.
This is how I ended up coding the size change:
function gallerySize() {
//set height of content to 70%
$('.popupGalleryBannerDIV').css("height", "70%");
//check img size compaired to it, of large set image height to height of content
var imgHeight = $('.popupGalleryBannerDIV').find('img').height();
//else if height is smaller set conect to height of img
if (imgHeight < $('.popupGalleryBannerDIV').height()){
$('.popupGalleryBannerDIV').css("height", imgHeight);
}
}
So, I have a popup that opens for a gallery. The width of the image in the popup is set to 100%, stretching to fit it's containing div. And, the height is set to auto, so the height will resize, depending on the width (same ratio). This is great for wide images ... but for tall images, the tall images get cutoff at the bottom of the page. If the height is too tall (and the image is cutoff), then I want the height to shrink to a different size, and the width to adjust. I tried max-height, but that skews the image ratio (shrinking the height, but not affecting the width). Anyone have a better solution?
You can see the problem here:
Webpage
Click the image of the outside white door, with the flower bushes (the 8th image). You will see that the image is too tall for the page, and gets cut off at the fold.
Here is an image of the issue
Any ideas?
Do you want to have a CSS-only solution? Are you able to use Javascript?
If you can use Javascript you could add a condition to see if the height of the image is bigger than the window height and in this case add a class to change the behavior of the image.
var img = document.querySelector("img"); // Add correct selector here
if ( img.height > window.innerHeight ) {
img.classList.add("maxHeight");
}
img {
width: 100%;
height: auto;
}
.maxHeight {
height: 100%;
width: auto;
}
CSS:
canvas {
max-width: 100%;
}
HTML:
<canvas id="Spades" width="240" height="320" style="background-color:white;border-radius:10px">
The above css is not working in IE10, height is replaced with the width i supply.
Any help is appricited
Are you trying to resize the canvas to full page size?
Your max-width is only used to define a theoretical maximum width of the canvas, not to cause the canvas to be resized.
Anyway...
Don't use CSS to resize the canvas because your canvas drawings will be distorted. That's because the browser responds to a css canvas resizing by "stretching" the existing canvas pixels.
Instead, resize in javascript by setting the width of the canvas element itself.
var canvas = document.getElementById('myCanvas'),
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
I don't get why the following pieces of code produce different results, because css would scale the canvas as it was zoomed in,
<style>
#canvas {
width: 800px;
height: 600px;
}
</style>
<canvas id="canvas"></canvas>
In contrast with this approach (that works as expected):
<canvas id="canvas" width="800px" height="600px"></canvas>
Think about what happens if you have a JPG that is 32x32 (it has exactly 1024 total pixels) but specify via CSS that it should appear as width:800px; height:16px. The same thing applies to HTML Canvas:
The width and height attributes of the canvas element itself decide how many pixels you can draw on. If you don't specify the height and width of the canvas element, then per the specs:
"the width attribute defaults to 300, and the height attribute defaults to 150."
The width and height CSS properties control the size that the element displays on screen. If the CSS dimensions are not set, the intrinsic size of the element is used for layout.
If you specify in CSS a different size than the actual dimensions of the canvas it must be stretched and squashed by the browser as necessary for display. You can see an example of this here: http://jsfiddle.net/9bheb/5/
The explanation is here: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width as seen in another post, thanks!
The intrinsic dimensions of the canvas element equal the size of the coordinate space, with the numbers interpreted in CSS pixels. However, the element can be sized arbitrarily by a style sheet. During rendering, the image is scaled to fit this layout size.
The best way to size your canvas is to include in a div and style your div with the size that you want.
Here is the CSS
<style>
#divCanvas{
width: 800px;
height: 600px;
}
</style>
Here is the HTML
<div id="divCanvas">
<canvas id="canvas"></canvas>
</div>