Making multiple background images scalable using CSS or Javascript? - javascript

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

Related

How to calculate the screen height and position an element below the fold?

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.

Make a tall image responsive with snap scrolling

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

Auto resize height of element

I want to create a banner like this http://www.firstborn.com/
I have got 3 different images loading in at different resolutions but the part i am struggling with it finding JQuery to replicate the sizing.
This banners height reduces with the screen size so if you just drag your browser viewport smaller you will see what i mean.
i want to set the height initially for 3 or 4 set sizes then have the height reduce or enlarge depending on the screen.
Ideally the solution needs to be as widely supported as possible :)
Any help would be really appreciated.
Set following css properties to your element:
position:absolute;
height:auto;
That's it. Let me know if you are still then facing any problem..!!!

Use CSS transforms or javascript to scale an element to fit its parent dynamically

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.

smart resizing of image preview sizes?

im using a image preview that allows me to add css styles to the previews that pops up.
now, some images are larger than the screen so you will just see a portion of them, while other images are very small so you don't have to resize them.
is there a way to only resize the larger images and not touching the smaller ones, eg. only resize images with width or height larger than 400 px?
any other approaches to make the larger ones fit into the screen without affecting the smaller ones would be appreciated cause if i just use width=400px and height=400px all images will be at that size and the proportion will be wrong. and for smaller images you will se very large pixels.
thanks in advance
Seam carving javascript implementation is what I call smart resizing of images :)
Anyway, in Javascript, you can implement your logic depending on the width and height properties of the Image object.
Also have a look at this page, the author uses jQuery to resize images larger than specified dimensions.

Categories