I have a high resolution image I want to use for a simple yet responsive "coming soon page." The image is 3 times taller than it is wide and itself contains a logo and some centered text strewn across three panes as in this example.
To make this webpage work on both large and small screens it would be great to
Auto resize the image height to 3 times the browser height
Maintain aspect ratio
Set a minimum image pixel width so that "Widest Text Blurb" is never cutoff
Allow the image to overflow as necessary to accomplish 1. without creating a horizontal scroll bar
It would be awesome to scroll snap between panes.
Parts Of The Solution
In the beginning I was using vw or vh on width or height settings but perhaps I should be scaling to something other than the viewport.
Aspect ratio is maintained by specifying the width, or the height, but not both,
Just use CSS min-width
This SO post and answered fiddle help but breaks when I try scaling the image.
I've experimented with cutting the image into 3 different images and placing them in divs in this scroll snap demo but the panes end up overlapping. Scrolling wouldn't necessarily have to show an entire pane but should snap to the horizontal center of a pane
How can I mix the partial solutions above (or others) to make an image scale as described? I have a ton of failed Fiddles I could share but none of them really give a starting advantage.
UPDATE
The text depicted in the imgr link isn't a placeholder for text that will be in divs but is itself in the image. Apologies for any confusion
Related
I have a main wrapper with a background image and the background image should extend to cover all of these elements. My HTML looks like this:
<div id="main-wrapper">
<div id="header"></div>
<div id="scroll-down-arrow"></div>
<div class="additional-content"></div>
</div>
I would like the calculate the height of the screen size and position "scroll-down-arrow" at the bottom of the screen and then position "additional-content" below the fold (not viewable area of the screen).
I have read the positioning tutorial here on W3 School: https://www.w3schools.com/Css/css_positioning.asp but still can't figure out the best way to accomplish this and position the content below the fold while maintaining the background image size of the main-wrapper.
Here's how my mock-up looks like, let's say the blue border is the viewable area on the screen, then the elements should be arranged like this:
Preferably I would like this to be pure CSS but I am also open to do the screen height calculation with JS as long as it's mobile responsive. Can you share a Pen or sample code if you have done something similar to this?
Your viewport height is window.innerHeight, so anything placed beyond that will be off-screen below, and anything placed before that (such that element.top + element.height < 0) will be off-screen above.
(To help with that, you can always get "the actual position of an element on the page, right now", probably element.getBoundingClientRect())
However, note that "the fold" is kind of a terrible notion given the huge range of possible browser sizes, not just desktop vs. mobile but also within desktop and mobile classes.
Instead of trying to figure out where the fold is, just make sure your main content is CSS'd in such a way that most of it's immediately visible at various media size breakpoints instead of trying to position things based on viewport/element coordinates after the fact.
And remember that the CSS vw and vh units exist specifically for this purpose.
Using react/jsx.
I know that backgroundSize: "cover" will use the smallest extent of an image for resizing while keeping aspect ratio. So a wide image will use it's height to fit a portrait/phone-shaped space.
transform: "scale(1.5)"increases the size of the image along with the constraints of it's container. Translation (movement) animations based on the above example can only move left right as the top and bottom are pinned to the container.
What I need is the cover effect of calulating image size based on it's container, but with the image larger than the container. My images vary in size and are being read into an array by react. I need it to automatically resize these images to the resulting size with the end goal of being able to use various #keyframe animated movement on the images.
How would I tell css to "reduce the image to cover the container, maintaining aspect ratio, but leave it an arbitrary 25% oversize"?
Alternatively, could I do something here with JS/React?
I have some flexibility, so I can add/change elements or components with styles if I need to.
We want to have "pages" where the background image takes up the full width and height (the user will click an arrow and the full page will move up/down). Obviously, we don't want to get weird stretching on the images.
Is the best practice to have different size ratio versions of the image (e.g. 16:9, 4:3, etc) to accommodate different screens or do we simply stretch like this:
If it needs to be stretched to reach the left/right side (but is then too tall) we cut off the bottom of the image
If it's too short so it needs to be stretched to reach the top/bottom, then we cut off the left/right because it's too wide
What is the proper way to handle this?
I know there are a ton of questions on here related to this, but nothing that directly solved my situation. Here's the site I am working on:
http://ledvideowall.net
As you re-size the browser window width smaller, the background images behind "LED Video Wall rental and sales" and "CONTACT US" scale down, but the height of the containers stay fixed, creating the extra white space in between those elements.
Is there an easy way to set the starting height of those two elements but also have the height scale along with the width while keeping the aspect ratio of those images?
Thanks
wouldn't it be easier to make the contact us bit using a div layered over the top with its transparency set to 50% rather than try to resize 3 images in unison
I have a page in which I have a wheel of <div> elements, the entire wheel rotates when you click a button.
I achieve this effect by using CSS transforms, which are absolute in nature. However the wheel is very big, it looks nice on my HD display, but smaller screens get the edges cut off. I can not use % widths like I could with a normal layout, what I need is to scale the entire page down in the same way most browsers zoom functions work.
For myself I know that ctr+mouseWheel will zoom out the page so I can see the entire page, however I can not expect others to do this.
I know I can use -browser-transform: scale(amt); on a wrapper div to get the effect I want, however I can not figure out a way to do it dynamically. If I set the scale to .5 it will be .5, no matter the screen. I want the edges of the wheel to just be a few pixels from the edges of the screen on ANY screen. I know that media queries could be used to help the problem, but they would either leave me with results that are less than ideal, or require too many different queries. There must be a way to modify -browser-transform: scale(amt); programmatically, or some other way to have finite control.
Any thoughts?
Have you tried using media queries in css to target different screens. for example, have a media query in your css file that states that at a width of 320 - 480 pixels, the div containing this wheel is scaled to 50%. Then at 481-768 pixels, the div container is scaled to 75%. and from 769 pixels up, the div is scaled to 100%.
That should help you accomplish the dynamic scaling you want at different screen sizes. If you would like a demo, I'll be glad to make a jsfiddle showing it.