Why the height and the width of node have difference from real - javafx

I try to get width and height of my node by this way:
bounds = node.getParent().getParent().localToScreen(node.getParent().getParent().getBoundsInLocal());
But width and height have the size more than real.

Related

How to make child relative to parent element's smaller dimension?

When it comes to CSS units:
I know vmin is relative to 1% of the viewport's smaller dimension.
I know % is relative to the parent element.
Is there any way I can combine them to get a child whose height and width will be relative to 1% of the parent's smaller dimension?
I'm looking for a CSS only solution if at all possible, but if not possible, then a Javascript solution is fine.
EDIT: I do basically want to maintain aspect ratio. My specific case is the following:
Parent div takes up about 80% of the entire screen. Child div needs to remain square shaped (same height and width) as the parent is scaled up and down. But I would like the child to be as big as possible while maintaining the square aspect ratio, so its height and width need to be 100% of the parent's smaller dimension.
<div id = 'parent'>
<div id = 'child'>
</div>
</div>
See this image for a visual representation:
You can use something like this:
const size_by_smaller_dim_of = (target_element, source_element, percents = 100) => { // target_el: child, source_el: parent
let h = Math.min(source_element.getBoundingClientRect().width, source_element.getBoundingClientRect().height);
target_element.style.width = (h * percents / 100) + 'px';
target_element.style.height = (h * percents / 100) + 'px';
};

Pixijs How to create scrollable container?

My intention is, having a Container, with a predefined width, made scrollable if the sprites inside occupy more width than the container.
Currently, if i set the width after adding all the sprites, the contents are automatically resized, which is not i wanted.
Sample code:
var container = new PIXI.Container();
container.width = 150;
stage.addChild(container);
for(var i=0;i<5;i++){
var eachImg = new Sprite("xxx.png"]);
eachImg.x = i*50;
container.addChild(eachImg);
}
How to code achieve such an effect?
Containers themselves don't really have a width and height... those values are just the overall dimensions based on where it's children are. Changing the width and height just changes the scale of x and y.
There's a WIP for a scrollable container https://github.com/pixijs/pixi-ui
and https://github.com/Ezelia/EZGUI also shows some effects of scrolling containers.

CSS convert percentage to pixel

I know my question may sound odd but I was wondering if there was a way to convert CSS percentage into pixels. My goal with this is to calculate widths and heights with percentage values but not have them change when the screen is resized. If there is another way to achieve my goal I would be glad to hear it.
you can do it using javascript.
you get the width of the current width of the element and then set that width to the element.
var wid = document.getElementById("mydiv").offsetWidth;
wid+="px"
this returns the width in pixels and you append the "px" to the returned numerical value
and then you can set it as below
getElementById("mydiv").setAttribute("style",'width:wid');
you can fix the width of the document at once in the beggining
$(document).ready(function() {
var screenWidth = $(window).width();
$('html,body').css('width', screenWidth + 'px');
});

QWidget::heightForWidth How set set the ratio between hight and width if no Layout is used

The ratio of a ´QWidget sub class is width = height. How I can set this, so the widget can not set to this values: QWidgetSub::resize(10, 4);? And so this statement is true QWidgetSub::heightForWidth(10) == 10?

Getting a Image to Resize Responsively Before It's Edges Are Reached in Bootstrap 3

I have a small image in my project that I would like to resize responsively any time the resolution changes. I am currently using the class "img-responsive". With this class, the picture doesn't start resizing until the window reaches its edge. In this case, since it's a relatively small picture, this never happens.
Is there a built-in Bootstrap class I can use to have the image resize responsively at all times?
I ended up using JavaScript
$(window).resize(function(){
if($(window).width() < 1100){
var width = $(window).width();
var ceiling_width = 1100;
var difference = ceiling_width - width;
var decrease = difference * 0.2345;
var full_logo_width = 404;
var new_logo_width = full_logo_width - decrease;
$("#my_logo").css({"width": new_logo_width});
}
});
If the browser's width gets lower than 1100px then the picture will start shrinking. My image has a width of 404px by default (if the browser loads with a width of more than 1100px). I wanted the smallest possible width for the image to be a little over 200px. The per pixel decrease to per window width decrease variable (0.2345 in this case) was calculated based on this. I used the following CSS to set an upper and lower limit for the image's width.
#my_logo{
max-width: 404px;
min-width: 210px;
}

Resources