CSS Responsive Image positioning and cropping - javascript

I am trying to create a foreground image (not background) that covers the entire viewport. When the page is resized or viewed on a smaller device I want the most important part of the image to be centered with any part that doesn't fit in the window cropped on its width (not its height). To clarify lets assume that this represents the horizontal pixels in a 10 bit pixel wide image that I want to center on pixel #7.
|0123456789|
displayed on a wider screen might be:
|0 1 2 3 4 5 6 7 8 9| (still encompassing the entire screen)
resized for a smaller screen:
|123456789|
|23456789| <-- Even smaller screen
|3456789| <-- Even smaller screen
|456789| <-- Even smaller screen
|45678| <-- Even smaller screen
|5678| <-- Even smaller screen
|678| <-- Even smaller screen
|67| <-- Even smaller screen
|7| <-- Even smaller screen
In this example the entire picture shows when the screen is large enough to display the entire picture. But when the screen shrinks, it should properly crop (mostly from the left) in order to make sure that #7 is always displayed with proportional movement towards the center of the screen. How can I do this? CSS, javascript and JQuery must be able to handle this.

edit, since it is foreground :
the idea here is to use line-height, text-align , min-height, min-width and negative margin to crop the image: average result below in snippet or codepen
html {
height:100%;
}
body {
text-align:right;
line-height:100vh;
height:100%;
}
img {
min-width:100%;
min-height:100%;
margin:-50% 0 -50% -240% ;
vertical-align:middle;
}
<img src="http://dummyimage.com/600x200&text=123456789" />
from my comment:
html {
min-height: 100%;
background: url(http://dummyimage.com/600x200&text=123456789) 73% center no-repeat;
background-size: cover;
}
the idea is, once page resized, the last number to be seen is 7.
You need to run the snippet in fullpage or play with the codepen liked earlier : http://codepen.io/gc-nomade/pen/jqjdrp

Think you're just looking for background-position: center?
/*.with-bg-size*/ html {
background-image: url('http://placehold.it/1600x1600');
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
}
<div class="with-bg-size"></div>

keep aspect ratio of image for responsive
div:before {
display: block;
content: "";
width: 100%;
padding-top: (16 / 9) * 100%;
}

Related

centering image overlaying another with xray effect

The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/

Very weird behavior when working with background size CSS3

I recently learned about the background-size property thanks to this topic
Set size on background image with CSS?
As you can guess, I am trying to make a background image take up the full screen and no more/no less. Here is my fiddle
https://jsfiddle.net/1x7ytdaa/
document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')";
document.body.style.backgroundSize = "contain";
Here is what the contain property does
Scale the image to the largest size such that both its width and its height can fit inside the content area
It shouldn't matter what size the image is. If it's smaller, it should be scaled to the full size of the screen. If it's larger, it should be scaled down.
In the fiddle, you can see that the image is repeated 5 times horizontally and 5 1/2 times vertically.
I've tried 100% 100% and while the width stretches the full screen, it still shows the same image 5 1/2 times vertically
I can not explain this behavior. Does anyone have any ideas?
Two things:
background-repeat
width and height of body
As you can in an edited fiddle, the problem is that the default value of background-repeat is repeat. Therefore, the image will be repeated rather than stretched. That doesn't solve everything, though, as the body and HTML elements should have a width defined that is 100%.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
document.body.style.backgroundImage = "url('http://www.crystalinks.com/ColosseumNight2.jpg')";
document.body.style.backgroundSize = "contain";
document.body.style.backgroundRepeat = "no-repeat";
If you want to cover the whole screen, use cover instead of contain. Cover makes sure that the element is completely covered, whereas contain simply makes sure that the background image is maximally contained (which can cause white space).
This might help:
position: fixed;
background-position: center;
overflow-x: hidden;
width: 100%;
height: 100%;
background: url(img/xxx.jpg);
background-size: 100%;
background-attachment: fixed;
overflow-y: scroll;

Reduces image by width first, then after max-width, proportionally

I have a image that have 1200 x 200px. On center of this image I have a space with 500 x 200px that is the main content of full image. On each side of this image, I have an additional content. Note: it is on a single image.
If the window width is reduced, then first it should consumes the additional content of the image, but cutting it, keeping image height intact. But if I reduces the window width below of the main content width (in this time, all additional content was cutted off), then now the image should be resized proportionally, affecting the height.
My doubts:
Is possible do it only with CSS?
If not, there are some JS library to do that?
If not, how I should structure the HTML, CSS and JS to do it works?
It's an example banner with full width: Note that is have a main content and two sides with additional content.
This image below should help understand: I tried to simulate a window width resize, on 1200 px, 1000 px and 500 px (that not affect height yet) then by 350 px (that affect and resize image proportionally).
#banner {
background-image: url("http://i.stack.imgur.com/csRha.png");
width: 100%;
height: 200px;
background-repeat: no-repeat;
margin: 0 auto;
display: block;
border: 1px solid red;
}
#media all and (min-width: 1200px) {
#banner {
width: 1200px;
}
}
#media all and (max-width: 1200px) {
#banner {
background-position: 50% 0;
}
}
#media all and (max-width: 500px) {
#banner {
background-size: 240%;
}
}
<div id="banner"></div>
Is possible do it only with CSS?
Yes, and you only need 1 <div>. Treat the image as a background image, positioned dead center with background-position. Then resize the <div> using media queries, setting widths to the designated breakpoints.
You might use a simple media query like this:
#media max-width: 500px {
#your-image {
width: 100vw;
}
}
Use media queries for adding images/elements and changing css.
As for your problem use percentages for re-sizing images.
I suggest to look up progressive enhancement and Responsive design.
Also look up view-port in case you are not using it.
Don't use VW there is not enough support yet in IE,EDGE(no support for VMAX) and Opera mini, ie8 (no support at all).

parallax scrolling image out of view

I'm working on a little extracurricular side project to bolster my html5/css3/jquery knowledge and I'm working with Parallax Scrolling but I can't seem to get the bottom image to scroll into view. It seems stuck behind the above it and no matter what I do I can't seem to pull it down into view.
There should be a giant dollar bill in the bottom black section where it says 'Abe is the money'
my url is : http://www.petegetscreative.com/abe/index.html
inspiration came from this tutorial: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
cheers
I think the dollar bill image is too small.
Looking at this Fiddle, when I increase the size of the dollar bill image to 200%, it becomes visible in the preview.
#known {
background: url(http://www.petegetscreative.com/abe/images/US-$5-SC-1953-Fr.1655.2.jpg) 50% 0 no-repeat fixed;
background-color: #000;
background-size: 200%;
height: 600px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
padding-top: 50px;
}
So what's probably happening is the height of the image is less than the difference in scroll positions. Try a larger (taller) image.
I believe that the problem could be the dollar image is less than section tag and the script you're running put the bg image with negative Y position. You can make a test making the image bigger than the 650px ( the section's height ).

Scaling div size with background image whilst keeping aspect ratio

Come a bit unstuck here.
I've got a div thats approx. 2000px wide by 800px tall.
Inside that div I have another div, with a background image.
I want the internal div, to take 80% height of the parent container, and for the width to keep proportion with the height, so the background image doesn't distort, if this makes sense?
Im using CSS3 to scale the background image 100% both x and y.
.internal-box {
background:url(images/elevator.png) repeat scroll 0 0 transparent;
background-size:100% 100%;
height: 80%;
width: auto;
}
http://jsfiddle.net/JbmE6/
Try this:
background-size: contain;
background-repeat: no-repeat;
However note that this might not be fully supported in all browsers such as IE8.
Also note that this doesn't make the <div> itself any smaller, it only makes the background image appear in only the relevant portion. If you put a border on .small you will see in fact it is 100% width of its container.

Categories