i'm try to determine the amount to scale down an image, which is in a container with other fixed height text fields, based on the resizing of a window to layout the container contents.
in this problem i'm only concerned about height, so when i mention scale, i'm refering to the height scale or scaleY.
in the diagram below:
Blue = Resizable main window.
Green = Resizable Container within main window.
Red = Fixed-height text fields (non-scalable).
Black = Scalable image.
the contents (text fields and image) fill the container, so the green container can represent the height of the text fields and image, or at least the difference between the first text field's y coordinate and the last text field's y coordinate and height.
resizing the window larger than the green container will have no affect on the green container and it will remain its current size. however, resizing the window smaller must change the container size to fit. i only have access to the image height. so resizing the window smaller will also scale the image height. the new scaled image height will determine the height of the container that includes the fixed height text fields.
Problem: after resizing the window to a lower height, how can i find out how much to scale the image (between 0.0 and 1.0) so that the fixed height text fields remain as distant from each other and the container is resized so its bounds remain equally distant (10px apart in this diagram) from the window.
image.scaleY = ...
Reducing window size by dh pixel must also reduce the image height by dh pixel in order to maintain all other absolute values.
Thus, the scaling factor is (given image_height is the current image height and dh is the number of pixels to reduce)
scale_y = (image_height - dh) / image_height
Just take the height of the resizable window (green), and subtract the sum of the fixed height components and the spacing between the components. The remaining space is what's available for the salable image.
Of course most UI toolkits include some tools to make this easy for you, like a table or grid layout that supports fixed and scalable cells, or a dock layout. If you can you should take advantage of this kind of features since it trends to be more performant/responsive.
Related
I have a mat-sidenav component filled with mat-card components. Outside the sidenav, I have the rest of my page. What I would like is for my sidenav card components to keep the exact same size as someone is zooming in and out the page. I have illustrated what I mean:
The image on the left shows my page before zooming, the right side is after the zoom. The content outside the sidenav (the boxes) zoom and scale accordingly, my sidenav itself has a max width set that it does not exceed even after zooming (I have achieved this). My problem lies in the mat card components (represented as circles). I would like my mat cards to also remain the same size after zoom as seen in the image, however, they grow like my components outside the sidenav. My mat cards are also wrapped individually in an <a> tag. I need it as if zooming in and out does not effect the sidenav nor its contents at all, how can I achieve this?
I would suggest you to work with the CSS Units: vw and vh.
vw=1 is relative to 1% of the width of the viewport, while vw=100 is 100%.
vh=1 is relative to 1% of the height of the viewport, while vh=100 is 100%.
The size will always adjust to the size of what you see. Therefore, even when you zoom in or zoom out, the viewport will stay the same and therefore, the sizes of your components won't change then.
You can test it out on these examples:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vh
I have a slider on my page with the property background cover applied so it fits the whole thing. The slider also has a 50vh fixed height.
The background always ends up cutting things from the image that I don't want.
How should I go about choosing the right width x height knowing that the website will be seen in very different devices?
The only other options besides cover are "contain" which scales the image to the largest size such that both its width and its height can fit inside the content area, thus leaving uncovered areas in the div's background. The other option is setting it to "100% 100%" which will stretch the image, and distort it in odd sizes.
Pick your poison ;-)
The image in the bottom of the parallax theme appears to be too small. If you expand your browser to full height you will see that it is showing spacing on the bottom.
My first guess is that the image is too small. However the height is actually larger than the one I'm using on the top widget area. Should I get a larger picture or is there something I can do with css?
URL: jeff-cunningham.com
It is using the width to scale the height. So to get the height you desire, you need to make sure the proportions of the image are enough to go down far enough.
As an easy example lets say your page is 1000pxs wide. You need the image to go down 2000pxs. You would then need your height to be 2 times bigger than your width. A picture with a width of 1500pxs and a height of 2000pxs would not work because the image would scale to a width of 1000pxs and a height of 1333pxs.
I have written a fairly basic javascript function that when an image is clicked on a full sized version appears in the foreground.
The image is set with max-width and max-height numbers in a CSS file such that it leaves some space around the outside and it preserves it's own proportions.
The problem is that if the image happens to not be large, or the screen of the users device has a very high pixel density then the 'larger' image might not be any larger.
Is there a way I can keep proportions, not exceed say 90% on either side, but set the largest dimension to be 90%.
The closest similar method I have found is the fill option for backgrounds.
Cheers
Set the width and height of the image to a relative value like 100% - (margin + border + padding) so that it will be stretched regardless of its actual dimensions.
Using max-width and max-height is a nice way to restrain your image from growing beyond specific proporitions, but leaves room for the image to decide what size it wants to be within those bounds. You say you do not want this, thus set width and height as well.
You can embed that image in div tag and apply css property width:100% to image and on click of image increase the width of div proportionately as per the resolution. In this scenario image with less width than parent div gets adjusted as per width of parent div.
I have an image of that has a height of 480px. On my Macbook it looks OK but when I go to my 30 inch monitor obviously there is a huge space in the bottom.
What can I do to make sure that the 480px will always be in relation so the size of the user's screen?
I did some searches and it seems that using background-image: cover or background position I can do some stuff but highly likely it's not what I am looking for. What can I do tackle this issue?
One way to achieve this is to place the image in a container that can scale with the page.
Height is a hard attribute to scale, but you can achieve it as long as all of the parent elements have a specified height as well.
You can use CSS code such as
height:40%;
to scale elements.
Scale the page's height here to see for yourself: http://jsfiddle.net/L7uWd/
Try with the width in percentage to set the image size as per the browser width. It's always preferable to set the width in percentage(instead of pixel) while re-sizing the element based on window re-sizing.
Set the image height to some percentage instead of pixel, that will automatically handle with the size of the screen.