We Keep Coding

How to make image inside div tag always a percentage larger than the container?

I'm currently using parallax.js (https://github.com/wagerfield/parallax) to get a parallax effect on a hero image on my page. I am trying to use a div tag to use as a "frame" so the image doesn't "appear" floating. I basically want the image to be a percentage larger than the div tag so as the image moves the container is fully covered by the image. This is what's happening. And not what I want. Hope this makes sense.
TIA
Here is my code:
<div id="scene" data-relative-input="true" class="float-image" style="border: 20px solid red; overflow: hidden;">
<img src="img/#.jpg" data-depth="0.2" class="cover-img">
<img src="img/#.png" data-depth="0.1" class="cover-img">
</div>
CSS:
#scene {
position: relative;
}
.cover-img {
max-height: 100%;
max-width: 100%;
}
.float-image {
z-index: -1;
object-fit: cover;
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}

Automatic img zooming?

I have a bunch of images being displayed one at a time in a div. The images are all a few thousand pixels by a few thousand pixels.
For example, one image is 4353x2721.
When I preview the page, it zooms in the picture and cuts out things along only the top and bottom edges. It remains the right width.
I need it to just resize it so that it fits the screen/div properly without cutting any parts.
The CSS for that section is:
.largeImage img {
position:absolute;
top:0;
left:0;
width:100%;
}
If I add height:100%;, it still doesn't work. Still zooms in.

You need to set max-width: 100% and max-height: 100% for image. It will make image to fit its larged dimension to parent container limits and scale down other dimension.
Look at snippet:
.largeImage {
width: 150px;
height: 200px;
display: inline-block;
position: relative;
border: 1px solid green;
}
.largeImage img {
display: block;
position:absolute;
top:0;
left:0;
right: 0;
margin: 0 auto;
max-width:100%;
max-height:100%;
}
<div class="largeImage">
<img src="http://lorempixel.com/output/food-q-c-640-480-5.jpg">
</div>
<div class="largeImage">
<img src="http://lorempixel.com/output/nature-h-c-640-1233-7.jpg">
</div>

Clip div also clip the scroll

I have two divs whitch the div child is inside of the div parent. The div child is bigger that his parent. So I decide to put a scroll in the div parent for i can see better the content of the div child.
The problem is that now I need to use the property clip in the parent div, but the clip also affects the scroll.
What I would like to ask if there is any way that I could clip the parent div and the scroll size ajdustes automaclty to the scroll.
Follows my code:
.outter{
width:100px;
height:100px;
background-color:blue;
overflow: scroll;
position: absolute;
clip: rect(23.75px 120px 120px 23.75px);
}
.inner{
width:200px;
height:200px;
background-color:red;
}
<div class="outter">
<div class="inner"></div>
</div>
[EDIT]:
Follows thee result that i pretend.
If you campare the image above and the result of the snippet that I put above is that in the result the scrolls apears cut and the image is not

That is what the clip property is supposed to do, restrict the visible area of an element. If you are trying to clip the contents of the inner element, you can absolutely position it to do so.
Hope this helps!
.outter {
position: relative;
width:160px;
height:160px;
background-color:red;
overflow: scroll;
}
.inner{
position: absolute;
left: -40px;
top: -40px;
background:url('http://placekitten.com/g/400/400');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width:400px;
height:400px;
}
<div class="outter">
<div class="inner">
</div>
</div>

How to fill the screen with image in impress.js?

My impress.js slides have images that I would like to fill the screen and center, here's the code:
<div id="impress">
<div class="step" data-x="-10000" data-y="100" data-z="0" data-scale="1">
Introduction
</div>
<div class="step" data-x="-10000" data-y="-1100" data-z="1000" data-scale="1">
<img src="images/Wallpaper-Abstract-Fractal-Flowers-Lilies.jpg" >
</div>
</div>
Right now it looks like below, but I'd like the image in the second slide to fill up the screen (maintaining aspect ratio).
Is there some way to zoom in by changing the data-scale or the camera angle? Or will some css tricks suffice? I started with the default example template.

You can use this CSS for image, I will work definitely.
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
margin:auto;

Add this to the css (X is the number of the step in question):
#step-X html,body{
margin:0;
height:100%;
overflow:hidden;
}
#step-X img{
min-height:100%;
min-width:100%;
height:auto;
width:auto;
position:absolute;
top:-100%; bottom:-100%;
left:-100%; right:-100%;
margin:auto;
}
and this to the html:
<div class="step" data-rel-x="2000" data-rel-y="0">
<img src="path/to/image.png" alt="">
</div>

I'm personnaly using the great object-fit: cover/contain; properties, and I set the size of the picture to the size of the viewport, and it's enough. Note that it also works with videos if you want.
.fitImage {
width: 100vw;
height: 100vh;
margin: 0;
padding:0;
background: black;
}
.fitImage img {
width: 100%;
height: 100%;
object-fit: contain;
}
<div class="step fitImage" data-x="0" data-y="0" data-scale="2">
<img src="picture.png" />
</div>

This answer is pretty late. But it may help some googlers (all of us) later :)
The trick is to combine the attribute data-scale=2 (or a bigger number than 2) on the slide, thus we have <div class="step" data-scale=2></div>
Then we fill this slide with an image and increase the height and width attributes of the image. Finally we have something like this :
<div class="step" data-scale=2>
<img src="src/of/image.jpeg" style="position: absolute; left: 0px; top: 0px; z-index: -1; width: 9000px; height: 1000px">
</div>
We can combine data-scale and dimensions (height,width) of the image until we are satisfied with the quality of the image.
Please refer to this link for more details : Hinco (impress.js contributor) Blog

Get Dimensions of background Image of div in HTML using Jquery or Javascript

AS shown in image I have a [wrapper] div which has background image inside this Image I want to place another div but as the Screen size changes the background image has different dimensions and thus the position of second div must change.
I have tried jquery to get width and height of the background image but it gives out 0,0.
What should I do.
jsfiddle code jsfiddle[dot]net/AFvak/

To my knowledge, there is no facility for querying for that kind of information about a background image. The only solutions I've seen seem to involve just loading in the image by some other means (e.g. with an img tag) and then querying that for the information.
See: How do I get background image size in jQuery?

If the center div should always be centered with a fix height and width then you could try this:
<div class="wrapper">
<div class="inside"></div>
</div>
Styles:
.wrapper {
width: 600px;
height: 500px;
margin: 40px auto 0;
position: relative;
border: 1px solid black;
background: url(image_here.jpg) no-repeat center center;
}
.inside {
top: 50%;
left: 50%;
width: 200px;
height: 100px;
margin-top: -50px; /* height/2 */
margin-left: -100px; /* width/2 */
position: absolute;
background: #000;
}
DEMO

try ..
$backWidth=$(window).width();
$backHeight=$(window).height();

As per my understanding you try to div tag should be on image with fixed position even browser will resized.
Here code:
<div id="wrapper">
<div id="test">
<img src="test.jpg" id="yourimg">
<div id="yourdiv"></div>
<div>
</div>
<style>
#test{
position:relative;
}
#yourimg{
position:absolute;
top:100px;
left:100px;
}
#yourdiv{
position:absolute;
top:120px;
left:120px;
}
</style>