I am building a module to display html divs(pages) which are designed to in a later stage be printed out as A4s. The area where these divs are displayed is however to small to display the full width of the divs and thus the pages and their content need to be scaled down to fit within the display-area at hand.
The children of the a4-pages are styled with both set widths/heights and percentages so it would be a nice approach to use the CSS3 Tranform scale to scale the pages down just enough so that they can be displayed but this becomes problematic since the scale is done after rendering and thus creates an white area around the pages.
I'm using jquery to rescale the pages when window is resized and will also implement this when page is loaded.
How do i scale several divs within a common wrapper and also readjust the parent so that the scaled div is showed without any padding around it?
Edit: I've put together a simple fiddle displaying the issue http://jsfiddle.net/96jkU/
#toBeScaled should display over the full width of #displayArea but still be scaled to 0.5
If I understand the question correctly, you want the scaled div to sit in the top left corner of the parent div.
In that case, the problem is that the transform origin is set to 50% 50% by default. This is good for rotations (you typically want to rotate something around its center) but not really for scaling; your div gets shrunk down to the center of where it would originally be.
Solution: all you need to do is add
transform-origin:0 0;
(with the proper prefixes) to the style for #toBeScaled.
See updated fiddle.
Related
I want to make a carousel-style widget that is built with 3 images and two buttons.
My problem is that this whole thing needs to be responsive and scale up (to some maximum) and down, while keeping the relations between the images.
The shape is as follows:
The pixel sizes of the images are all known upfront, and any relation that is needed can be known upfront (e.g. the amount needed to move the green and blue boxes since they are not vertically centered).
I am not very experienced with HTML/CSS, and I managed to get this shape with flexboxes and translations, but I could never manage to get it to scale correctly with the rest of the page.
I don't quite understand if this is even possible with CSS, since it requires some sort of absolute positioning / translations / etc. that ruin its box model.
The next thing I thought of trying is to use a canvas instead and draw the images myself, while letting the canvas width to stretch as it wills (up to a maximum) while I control the height in JS, since I know the aspect ratio of the widget.
I would really prefer a simpler HTML/CSS solution though.
I suppose I could do the same without a canvas - a container that is controlled by CSS for width, but I control its height, and the images/buttons could all be absolutely positioned in it, but that's kinda weird as well.
Your goal can be accomplished by using percentage-based width values (heights being auto or unset) for the images at different CSS breakpoints (e.g. Bootstrap's listed at https://getbootstrap.com/docs/5.0/layout/breakpoints/). Practically from an aesthetic standpoint, I suggest setting buttons to pixel values (again, differing at breakpoints). Either a container (like a div element) or the body element will be the parent element to which your images and buttons scale.
To accomplish overlapping of images (and horizontal alignment of buttons mentioned in the next paragraph), for all elements you'll need to set z-index, which indeed does require either absolute or fixed positioning. Given your elements will be either absolute or fixed in position, you could modify vertical positioning using the top property.
Give the three images auto left/right margins. Set the buttons to the same z-index as the green image so that they'll rest against the green image. Give the L button a left margin of auto and right margin of 0. Give the R button a left margin of 0 and right margin of auto.
No JS required with this solution, as you'd prefer.
I've created a very easy looking slider using Adobe Flash. This is four big pictures containing some text, which will be placed in a HTML-website using Dreamweaver. The size is the problem. The picture is suppose to fit the entire width, and like 50% of the heigh. When I "Preview in browser", it won't fit the screen, and you have to "scroll" around to see the entire picture. Any suggestions?
How the percentage is applied depends on a number of things, some of them being:
Box-sizing
Display value of parent and child
Whether the parent has its width set
Whether the parent and child are in the same flow
Please check against this list to find out what the issue is in your case.
On my way on implemented my idea, I am trying to put a lot (toy example: 4) images in one slide of the carousel of Bootstrap. However, I am failing big time on resizing them so that all the images have same characteristics in dimensions, regardless of their original ones.
Here is the jsFiddle where I display the issue in slide 1, and here is just one of the many attempts I made:
img.resize{
width:256px;
height: 256px;
}
You see, I would like the images to all have the same dimensions, for visualization purposes. How to do that?
In other words, what I want is every image to be of the same width x height dimensions. Like we were passing them through a neural layer that would trim the dimensions to make them homogenous, like all of them were placed on the same box! The ideal thing would be to get something like what the search engines give you (where the height is the same for all, and the width might differ a bit, but w.r.t. to visualization that doesn't cause any harm).
Now, the black is shorter than the yellow.
use max-width and set the .item class's height... and overflow: hidden:
Fiddle
4 images in 1 slide: Fiddle. Be aware that with just straight images you won't be able to make them the same size. Well, unless you want them squished and squeezed to look horrible.
If you want all 4 images to appear to be the same size, you need additional markup, such as a div wrapping the image tags. This is how things like Google images does it.... they wrap the image tag in a div, then hide any overflow of that div.
You can't resize 4 images in that current markup to be exactly the same size in a single one of those slides. Images themselves can't be cropped or have portions hidden. It's surrounding elements that cause images to appear cropped by hiding any overflow.
I had an idea for a background but I don't know if it can be done, and if it can, what the best method would be. Just to let you into my idea, it's a grid of squares as the background for a page but when you mouse over one it changes color and slowly shifts back(I know how to do the animation portion). The grid is supposed to span the entire page, width and height, and overflow would be hidden. I'd also wish that it could re size itself if the page does
So I'm wondering if this can be done. If it can, how would I generate the grid?
I'm at a complete loss. Any ideas?
I would use <canvas>. Or maybe fill entire body with equally sized DIV's with height and width defined in percentages. Lets say that would be grid of 10x10 DIV's. Or you can create on -the-fly with jQuery as many DIV as you want (to fill whole height). You can float those DIV's to fill entire viewport, and if window is resized use media queries to arrange them. On hover, you can apply some animation on every DIV. Of course, you can put other elements over those DIV's.
Setting max-width and max-height to 100% for an image does what's intended and scales the image to fit it's container with aspect-ratio intact. However, I need to achieve the same thing but with an extra container kept tight around the image (to be able to position other stuff relative to the image).
I'm looking for non-JS solutions and mark-up semantics is not an issue since this is for an app. (tables would be ok). Also image dimensions can be considered known.
Another way to describe what I want: Make an image always fit inside the body and display a border around it (not using the trivial solution of putting a border on the image itself)
Here is a fiddle showing the problem. I gave the image an 0.5 opacity to make the yellow container show through. The objective is to have the container always the same size as the image. Ie. the image will always have a yellow tint but no other yellow areas should be visible. Note: I'm not trying to achieve any coloring effects it's just an illustration of the problem.
Try this one, http://jsfiddle.net/xmarcos/K4dHr/
Update: http://jsfiddle.net/xmarcos/K4dHr/4/
Here, this seems to work: http://jsfiddle.net/Wexcode/vzc4m/1/
You don't need to have a max-height around your <div> because it will stretch to the dimensions of its inner elements if you set it as display: inline-block. Forcing the <img> to have display: block will ensure that there isn't any extra space added around element inside container, unless you specify it (using margin).