Image 100% of parent. Parent is position fixed - javascript

Could somebody please assist. I am trying get an image to have a max-height and an auto width. The problem is these rules are being ignored as it's parent is fixed
DEMO http://jsfiddle.net/gop4jhm9/5/
#myDiv {
position: fixed;
top: 100px;
left: 50%;
width: auto;
height: auto;
max-height: 100%;
background: red;
display: inline-block;
padding: 10px;
max-height: 30%;
}
#myDiv img {
width: auto;
height: 100%; // being ignored
}
Is there any way of doing this via CSS, JS, jquery ?

The problem is that you have the #myDiv with two max-height attributes. Take away the second one, which restricts the div to 30%, and it will work in fixed.

That is because it intends to keep the image's aspect ratio because you set the margin to auto. if you wish for a max height to be set, set it in the max-height property of the #myDiv.img.
#myDiv {
position: fixed;
top: 100px;
left: 50%;
width: auto;
height: auto;
background: red;
display: inline-block;
padding: 10px;
}
#myDiv.img
{
width: auto;
max-height:90%;
}

Related

css/JavaScript resize div content to fit window

I have a page with a lot of images positioned on top of another image.
The position of the smaller images is relative, and the left and top distance is given using px.
When I scale the window, the collection of images moves and stays in the right place. But I want it to also scale when I resize the window. (The ratio of the images should stay the same, but smaller/larger.)
All the images are contained in an overlaying div.
Is there any way for me to do this without having to reposition all the images? (I'm very new to css/JavaScript)
Here's an example of what is happening: https://codepen.io/gwenvere/pen/MWJdvJp
What I want is for the red ball to stay on top of the mountain, but for the mountain and ball to shrink if the window becomes smaller.
Here is an example of the css of one of the smaller images:
position: relative;
left: 161.7px;
top: 208.7px;
width: 79px;
height: 79px;
background-color: rgba(56, 152, 236, 0);
background-image: url('../images/Medium.png');
background-position: 0px 0px;
background-size: cover;
}
The css of the larger image:
.image-11 {
position: absolute;
left: 0%;
top: 148px;
right: 0%;
bottom: 0%;
width: 1200px;
max-width: 1200px;
margin-top: -37px;
margin-right: auto;
margin-left: auto;
}
css of the overlaying div:
.div-block-3 {
position: relative;
width: 1200px;
height: 800px;
max-height: none;
max-width: none;
min-height: auto;
min-width: auto;
margin-right: auto;
margin-left: auto;
background-color: rgba(83, 39, 39, 0);
-webkit-transform-origin: top left;
}
The image in your Codepen is set to position: absolute at a fixed width and height of 1200px and 800px, so it doesn’t resize.
As your description of your question talks about resizing the window, I’m assuming you want your main image to scale up and down and for the red dot to stay in the same relative position.
One way to do it using CSS would be to use percentages of the width and height to position the red dot, and use a percentage of the width to scale the size of the dot (using a ratio to set the dot’s height.
body {
padding: 0;
margin: 0;
}
.body {
position: relative;
width: 100%;
max-width: 1200px;
margin-top: 147px;
margin-right: auto;
margin-left: auto;
background-color: rgba(83, 39, 39, 0);
}
.largeImage {
width: 100%;
height: auto;
}
.smallImage {
display: block;
position: absolute;
left: 57.5%;
top: 26.17%;
width: 6.67%;
height: auto;
transform: translate(-50%,50%);
background-color: rgba(56, 152, 236, 0);
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Circle_Burgundy_Solid.svg/1024px-Circle_Burgundy_Solid.svg.png");
background-position: 0px 0px;
background-size: cover;
margin: 0 auto;
}
.smallImage::before {
display: block;
padding-top: 100%;
content: "";
}
.smallImage a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="body">
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" loading="lazy" alt="" class="largeImage">
<div class="smallImage">
</div>
</div>
I included a margin above the image as you had that in your Codepen.

Can't override default margin of h1 text?

Despite doing:
top: 0%;
margin-top: 0%;
padding-top: 0%;
there's still a gap between the top of the header in #txt and #outer - why?
It looks like it's because the <h1> text has a default margin that I can't override?
JS FIDDLE
Because you have a height of 90% which makes the object not as high as the parent and is therefore unable to reach the bottom.
Changing the height to 100% will fix the problem.
Edit:
If you want to move the space from the bottom of the div to the top you have to change top: 0% to top: 10%.
You just need to add this to your CSS
#txt h1 {
margin-top: 0;
}
You had set a fixed height for #txt, from what i understood, this is what you're looking for?
https://jsfiddle.net/dryy2j31/5/
#txt {
position: absolute;
background-color: green;
top: 0%;
margin-top: 0%;
padding-top: 0%;
width: 100%;
height: auto;
}
In your fiddle you are applying the margin:0%; to the #txt div, so no rules are being applied to the <h1>. You just need to add #txt h1 { margin: 0; see below.
var outer = document.createElement("div");
outer.id = "outer";
var txt = document.createElement("div");
txt.id = "txt";
txt.innerHTML = "<h1>Enter your email</h1> <p>We need your email to do stuff.</p>";
outer.appendChild(txt);
document.body.appendChild(outer);
#outer {
background-color: yellow;
width: 530px;
height: 300px;
position: absolute;
left: 0%;
right: 0%;
top: 9.05%;
margin: 0 auto;
}
#txt {
position: absolute;
background-color: green;
top: 0%;
margin-top: 0%;
padding-top: 0%;
width: 100%;
height: 100%;
}
#txt h1 {
margin: 0;
}

Center absolute div indside/outside relative div

Is it possible with either CSS or jQuery to center an absolute div inside or outside a relative div, if you dont know the width of the relative div witch in this case is the parent element of the two.
normally i would do something like:
.child {
position: absolute;
top: 100%;
left: -50px;
width: 200px;
height: 300px;
}
but only if i knew that the parent is 100px wide, but what if i dont know?
FIDDLE
If you don't need to target IE8 and lower, you can use the CSS3 calc() function:
left: calc(50% - 100px);
Replace 100px with half of whatever width your absolute positioned child element is.
JSFiddle example: http://jsfiddle.net/Gmmqh/5/
Note the use of box-sizing: border-box to make the boxes even with each other, like on the third one.
To center anything use below code
margin:0px auto;
So your .child becomes
.child {
display: none;
position: absolute;
top: 100%;
margin:0px auto;
/*left: -50%;*/
width: 200px;
height: 300px;
background: #eee;
border: solid 3px #ddd;
}

Absolute positioned element not extending with scrollable content (past 100%)

I have a popup window in which an element called fade is supposed to extend to the full width of the screen (it does this when there is no scrollable content). However when content exceeds 100% of the browser window it does not extend to 100% of the page height.
If i set html, body { height: 100%; overflow-y: hidden; } I get the result I want but then I get 2 scrollbars on the right hand side.
http://jsfiddle.net/Dpqg5/
HTML
<div id="fade"></div>
<div id="popup"></div>
<span id="open">Open Box</span>
CSS
#fade { display:none;width: 100%; min-height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 1;}
#popup { width: 200px; height: 300px; background-color: #ccc; position: absolute; top: 30px; left: 50%; margin-left: -100px;display:none; }
#open { cursor: pointer; }
Any ideas on how to get this element to extend fully to the height of the web browser even when there is more scrollable content?
set your fade css to:
#fade {
display: none;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

Pure JavaScript: Center an absolute position div in body

What's the easiest and shortest way to center an absolute position div in the body without using a library like jQuery. Thank you!
Edit:
Something like http://jsfiddle.net/apfwh/ but maybe with a bit cleaner?
I think no js needed. CSS will do it (see here):
body {
background: #888;
}
.box {
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
UPD
In case you don't have fixed width/height of element:
JS (when element is opened):
element.style.margitLeft = -element.offsetWidth / 2
element.style.margitTop = -element.offsetHeight / 2
CSS:
.box {
background: #ccc;
position: fixed;
left: 50%;
top: 50%;
}

Categories