Consider the following layouts:
The cyan rectangle has a set ratio. That is - The width of the rectangle is derived from the height of its container by a set ratio.
The blue rectangle height is set according to the height of the container, its width is set as the rest of the available viewport width.
The container of the cyan and blue rectangles can be changed via dragging.
Dragging is easily achievable via JS. The layout described can be achieved via CSS.
The end result of changing that viewport size (browser width) and container height via dragging, is that the blue container may change aspect ratio from portrait to landscape and vice versa.
My question -
Is there a way in CSS to style the blue container according to its aspect ratio? (portrait\landscape)
I thought about using media queries, but these only query the dimension of the browser and not those of an arbitrary container within the DOM.
Also I don't really like the idea checking the ratio in JS and adding\removing classes accordingly - it feels seems kind of unscalable to inject presentation layer logic into JS like that.
Related
I am designing an HTML5 card game that will run as a mobile app, and need the #table div to scale to fill but not overflow the offsetParent div while maintaining the table's correct aspect ratio of 68%. This means that it should adjust its size to fill but not overflow either parent width and parent height so that it works in both portrait and landscape.
An example is how background-size: contain works when setting the background image. Only I'm not trying to set the background image, I'm trying to set the size of a child div. This way I can use percentage values for all subsequent elements on the table and have the game look exactly the same with exactly the same aspect ratio at all sizes.
Thanks!
UPDATE 1
Here is my code. See how the table is chopped off on the bottom for wide and short screen sizes:
http://vedanamedia.com/clients/intuitive-eye/speakeasy/
UPDATE 2
I am going for something just like this (jsfiddle.net/webtiki/dAebS) or this (dabblet.com/gist/2590942) except it also respects the shrinking height of the container.
You could try removing the default height, and adding padding bottom to create the correct aspect ratio and ensure it remains the same when re-sized.
I'm not completely sure I understand what you mean by 68% as you don't have a code pen setup, but I've added below an example for something which is an aspect ratio of 2:1 to see if this might be a possible fix for you.
div {
padding-bottom: 50%;
height: 0;
}
I need to preserve the aspect ratio of a div when the browser window is resized.
I have done a good bit of searching on this, and it is possible to use padding to preserve the aspect ratio of a div by making its height relative to its width, whenever the width of the screen is altered.
The technique is shown here on Stack Overflow, and in particular, this linked to example shows the technique in action.
But I need to do the opposite. Rather than making the height relative to the width of the div, I need the width of the div to change whenever the height of the browser window is altered. I need to do this because I have a background image that I want the content to flow relative to, and that background image has a 100% height, and its aspect ratio is preserved.
I have tried using linked method, but swapping horizontal for vertical attributes. It isn't working. I have no idea why. Perhaps someone can show how to do this.
I need the width of the div to change whenever the height of the browser window is altered.
For a pure CSS solution to that, you will have to wait for a broader implementation of either calc() or the vh unit.
I don't know if this is possible in pure CSS, but there is a possible way with jQuery, see this discussion
Maybe something like mmoustafa suggested:
$(window).resize(function() {
$('#my-div').css('width', window.innerHeight*0.4+'px');
$('#my-div').css('height', window.innerHeight*0.2+'px');
});
I'm trying to make a horizontal layout (with columns) where the content scales based on the browser window height.
I came across answers about perfect ratio based on width, but I want to have an infinite width (as the amount of content won't always be the same).
Is this possible just using HTML/CSS?
It is going to be hard to maintain the aspect ratio with css, but if you set the height of the maincontent box to 90% and the height of the containers to 100%. They should respond to
the browser window. But only in height, never in width.
From there you can use javascript to set the with to be <height> * 1.5 (or similar) you will have to do this in the document ready event, but also in the window resize event.
Following http://www.html5canvastutorials.com/tutorials/html5-canvas-rectangles/, I have drawn some rectangles side-by-side on a canvas. The problem is that they appear greatly zoomed in; at a zoom of 1.0 they appear approximately five times their original size; they appear correctly sized (if fuzzy around the borders) at a zoom of around 0.16.
I expect I could get a workaround by making the pixel dimensions of the canvas much greater and zooming out, but what is the proper way to get a 1:1 scaling on a canvas? The canvas is styled to width and height of 100%, and the body has a margin of 0. Manually setting the canvas's width and height to the height and width of the window does not alter this behavior.
TIA,
the problem is, you set the width and height of the style for the canvas. You need to set the width and height attributes, not the css style. so something like:
<canvas id='mycanvas' width='800' height='600'></canvas>
More info in a similar question: Canvas is stretched when using CSS but normal with "width" / "height" properties
I want to load some photos from a server and display each of them in an own box such that the box is filled and the image centered (not stretched), if it is to big. Can I achieve this for example with CSS without knowing the size of each image? Maybe with max-width or so?
Here is an example of what I want:
You could use the CSS3 background-size property.
Specifically, you would use either background-size:contain or background-size:cover.
From the spec:
Values have the following meanings:
‘contain’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the largest size such that both its width and its height
can fit inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the smallest size such that both its width and its height
can completely cover the background positioning area.
Source: http://www.w3.org/TR/css3-background/#the-background-size
Which one you used would depend on the aspect ratio of the original images you are using.
Scroll down on this resource to see some examples: http://www.css3.info/preview/background-size/
The quickest thing that you can do is to put the image as a background image that is centered:
style="background: url(images/42.png) 50% 50% no-repeat"
Images smaller than the box will be centered in the box. Images that are larger will experience cropping.
The downside is, there is no scaling.
For scaling, you would have to know the dimensions, employ some math to calculate a scaling amount that will preserve the aspect ratio and use an actual element that is inside a cropping container that uses "overflow: hidden".
Here what you do. If for instance the image is inside a DIV with an ID called "boxer" You'll now create a CSS that will automatically re-size every image that's inside the DIV with the ID "boxer" The CSS will look like this
#boxer img {
Width: 600px
Height: 600px;
}
The above CSS will automatically re-size whatever image you put inside to the specifications in the CSS. This will fit the box with the ID "boxer" precisely if the dimensions corresponds to that of the CSS. You could just do 100% for both the width and the height, that way it fits the box.