I am trying to place a <div> in a specific position on top of an image.
The image width is set to 100% to always fit the screen.
My problem is that the <div> position is not relative to the screen as the image.
In this example, I am trying to place the div attached to the gray line (even if the screen resolution changed).
https://codepen.io/eyalankri/pen/GdGvGO
Is it possible?
Try out this codepen.
You need to give percentage width to your give, and make left position also in percentage unit, so it changes accordingly screen size.
html, body {
margin: 0;
padding: 0;
height: 100%;
background-color: black
}
.slider-container {
z-index: 0;
min-width:1024px;
position: relative;
}
.slide-image {
width: 100%;
min-width:1024px
}
.form-container {
z-index: 999;
position: absolute;
top: 0;
height: 300px;
width:11%;
background-color: white;
text-align:center;
left: 27.5%;
}
<div class="slider-container">
<div class="form-container">
<br/>
my div
</div>
<img class="slide-image" src="http://ecocar.co.il/test1.jpg" />
</div>
Related
This is what I currently have:
<div class="container">
<img src="example.jpg">
<div class="overlay">
</div>
</div>
.container {
position: relative;
}
img {
width: 100vw;
height: 100vh;
object-fit: contain;
}
.overlay {
position: absolute;
border: 2px solid red;
top: 10%;
bottom: 10%;
left: 20%;
right: 20%;
}
What I would like to happen is that the overlay element stays relative to the size of the image regardless of the scaling, i.e. the top of the overlay is 10% below the top of the image and so on. However the current behaviour is that the overlay is instead relative to the container, i.e. the top is 10% below the top of the container etc. How can I fix this?
I currently have a modal which i want to use as overlay over webpage.
HTML:
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="imgCon">
<img class="overlayimg" src="img/trendoverlay.png" />
<img class="overlayimg" src="img/trendtimeline.png" style="display: block"/>
</div>
</div>
CSS:
*{
box-sizing: border-box;
}
body{
width:100%;
}
.imgCon{
position: absolute;
height: 100%;
width: 100%;
padding: 0 51.5px 73px;
text-align: center;
}
.overlayimg{
max-width:100%;
max-height: 100%;
height:auto;
}
However here's the problem. The first image(top one) when only image. It's perfect. It works fine.
The image that goes underneath has to stay inside the same DIV as the other image, be as wide as the upper image. But height is fixed. Is there a way to achieve this so they still scale with the padding of 51.5px left/right and 73px at bottom?
picture with more info:
Example
Fiddle:
https://jsfiddle.net/4n1quv9n/1/#&togetherjs=sT7KVDhPT8
As you can see the top image scales how I want it to scale. That it keeps it's aspect ratio but had a minimum left/right and bottom. The image underneath the one is suppose to have the same width as the top image. But the height has to be fixed at 110px. But the Div which contains the images must keep the padding at those 2 minimum at the sides and bottom.
This is going wrong:
https://imgur.com/a/ILPpO
Here the bottom image must also scale as wide as the top image. And actually they also need to stick together so it looks like 1 image instead of 2 seperate ones.
Give this a Try
CSS
body{
position: relative;
}
.wrapper{
position: relative;
}
div.image-container{
position: absolute;
margin:auto;
height: 100%;
max-width: 100%;
padding: 0 51.5px 73px;
text-align: center;
}
img{
max-width:100%;
}
HTML
<body>
<div class="wrapper">
<div class="image-container">
<img src="http://imgur.com/c7uASdV.png">
<img src="http://imgur.com/60d6BUt.png" style="height: 110px">
</div>
</div>
</body>
Link for reference
You could give a try to display:table properties to draw a cell at middle to hold and resize first image, and absolute positionning for second image :
#modal {
display: table;
height: 100vh;
width: 100vw;
padding-bottom: 73px;/* bottom limits */
box-sizing: border-box;
}
#modal:before,
#modal:after {
content: '';
padding-left: 51px;/* sides limits ... pixel cannot be cut in hlves */
display: table-cell;
}
.modchild {
display: table-cell;
position: relative;
margin-bottom: 100px;/* room for img 2 */
width: 1%; /* will expand to fit image width and will stand at middle */
}
img[src*="x212"] {
height: 100vh;/* size it */
max-height: calc(100vh - 100px - 73px);/* downsize to use */
display: block;/* or reset vertical-align*/
}
img[src*="x100"] {/* size and stretch it */
margin: 0;
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 100px;
bottom: 0;
}
* {margin:0;}
<div id=modal>
<div class=modchild>
<img src="http://dummyimage.com/400x212&text=keep_ration" />
<img src="http://dummyimage.com/400x100/ff0&text=distort" />
</div>
</div>
fiddle example : https://jsfiddle.net/4n1quv9n/4/
What I am trying to accomplish:
- create a pop-up div (fixed), centered in view
- this pop-up should be 60% height of the browser window
- the contents of the pop-up should be an image and a 'x' above the upper right corner of the image
- the height of the image should be maximal, considering it should be contained in the div together with the 'x'
- the aspect ratio of the image should be maintained
I tried the following code
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" width="1200" height="630" alt="" title="" />
</div>
With CSS:
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
text-align: right;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
This code is not solving the problem, the image is not contained in the (yellow) div, as can be seen in the following screen shot:
http://www.michielvisser.nl/tmp/screenshot.jpg
How to contain the image in the div with maximal height for the image in the div and maintain aspect ratio?
SOLUTION 1: Remove the height and width from .pop-up and change height:100% in .image to height:60vh. That works perfectly. Apparently the child (img) will not adjust to the parent (div), but the parent (div) will adjust to the child (img). Sounds like real life.
SOLUTION 2: Essentially the problem arises when the window is resized (except in firefox). The solution can be to redraw the image after a resize, this solves the problem:
$(window).resize(function(){
$('img').hide();
setTimeout(function(){ $('img').show(); }, 1);
});
Your problems are:
You have an inline width and height set on your image, which is overriding the CSS styles for width and height on that image
The margin from your X is pushing the image down since the X is wrapped in a <p> tag.
You don't need object-fit at all.
The simple way to solve #1 is to delete the inline width and height from the image tag and leave it to the stylesheet.
Number 2 can be solved by wrapping the X in a div instead of a p, or you can use a pseudo element for it. I have taken the latter approach in the snippet below.
To solve #3, just delete the style from the stylesheet. (Having this property set in Safari actually messed things up for me.)
This snippet is tested in Safari 10.1.1. Note how the placeholder image is quite large by default (1000x800), but it only displays as big as it can per the parent div.
Edit: Based on your comments, let's revise this further so that we dictate the size on the image, and just let the wrapper take up the size of the image.
So on our image, in order to get it to be 60% as tall as the screen, we can do:
img {
height: 60vh;
width: auto;
}
Then, in our parent, we won't specify a width or height at all, but we can do display: flex just to make sure it is big enough to fit its contents.
body {
background: #333;
}
.pop-up {
display: flex;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: yellow;
}
.exit {
color: black;
text-decoration: none;
text-align: center;
font-size: 300%;
display: block;
position: absolute;
top: -50px;
right: -40px;
width: 40px;
height: 50px;
}
.image {
height: 60vh;
width: auto;
opacity: 0.7;
}
<div class="pop-up">
X
<img class="image" src="http://placehold.it/1000x800" alt="" title="">
</div>
I put the image above the P tag and added some CSS to .exit-button and .image
From here you can adjust padding and sizing of the elements.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
position: absolute;
text-align: right;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;
font-size: 300%;
}
.image {
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<img class="image" src="http://icons.iconarchive.com/icons/johanchalibert/mac-osx-yosemite/1024/safari-icon.png" width="1200" height="630" alt="" title="" />
<p class="exit-button">x</p>
</div>
I copied your code and edited it. Please tell me whether this is the output you wanted or not.
body {
background: #333;
}
.pop-up {
position: fixed;
height: 60%;
width: auto;
left:50%;
top:50%;
padding-top: 30px;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:yellow;
object-fit: contain;
}
.exit-button {
margin-top: -50px;
text-align: right;
margin-right: 0;
font-size: 300%;
}
.image {
margin-top: -20px;
height: 100%;
width: auto;
opacity:0.7;
}
<div class="pop-up">
<p class="exit-button">x</p>
<img class="image" src="safari.png" alt="" title="" />
</div>
Because of either needing to hardcode in the alignment of the image given the size or deal with weird convolution, I believe this is the best way:
Create a fixed overlay occupying the entirety of the screen, create a container of 60% height, align it in the center with flexbox and stick the image inside making it occupy the entire height. The aspect ratio will update automatically (only happens with height).
As for the button – give it absolute positioning and a right position of 0, and manually give the parent relative positioning (this is necessary).
<div id="popup">
<div id="container">
X
<img src="https://i.redd.it/gelilvo30mgz.jpg">
</div>
</div>
html,
body {
height: 100%;
}
#popup {
position: fixed;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#container {
position: relative; !important // has to be specified for the children (anchor) to find the bound
height: 60%;
background: #333;
}
a {
right: 0;
position: absolute;
}
img {
height: 100%;
}
https://jsfiddle.net/L2nLjjxc/1/
I believe that's the least amount of convolution if you want it to be dynamic.
I have pure CSS image slider which I want to have positioned (margin:auto) with text underneath. Slider images are absolutely positioned as they are stacked. I can't figure out how to position divs around it all. I have content and wrapper divs with relative position. Image size should be responsive (therefore max-width:100%) but wrapper or content divs can be exact size. Or maybe they don't need to either?
This is what I am after:
And this is what I managed so far: www.jsfiddle.net/1qxxnxbf/1/
If your image slider is a carousel, you can't make it responsive without js. If you give your slider a height in the css, you can adjust it in the js to make it responsive.
The only other thing you can do is maintain an aspect ratio. So in your example you have 350x220 images. so If you get your padding-bottom on your .slider class to 62.857% (roughly 220/350) you get a variable height based on the width. If your width grows/shrinks, the height will grow/shrink as well.
http://jsfiddle.net/1qxxnxbf/2/
Edit: I just noticed that none of your code around the slider is responsive. Why are you trying to make the slider responsive?
Checkout this design
https://jsfiddle.net/jalayoza/zvy87dcv/9/
HTML code
<div class="content">content
<div class="wrapper">wrapper
<div class="slider">
<img src="https://placeimg.com/350/220/any" class="slide" alt="slide1">
<img src="https://placeimg.com/350/220/nature" class="slide" alt="slide2">
<img src="https://placeimg.com/350/220/abstract" class="slide" alt="slide3">
</div>
<!-- text should go underneath the image -->
<div class="text">
<div class="text_left">
left text
</div>
<div class="text_right">
right text
</div>
</div>
</div>
</div>
CSS code
.content {
width: 500px;
background: #fff;
margin: auto;
}
.wrapper {
max-width: 400px;
position: relative;
background: purple;
margin: auto;
padding:10px;
}
.slider {
margin: auto;
left: 0;
right: 0;
max-width: 100%;
position: relative;
padding-bottom: 62.857%;
}
.slide {
max-width: 400px;
margin: auto;
position: absolute;
opacity: 0.5;
width: 100%;
}
.text {
max-width: 100%;
position: absolute;
background: transperant;
opacity: 0.9;
bottom:10px;
width: 95%;
}
.text_left {
max-width: 50%;
background: #fff;
float: left;
text-align: left;
padding:5px;
}
.text_right {
max-width: 50%;
background: #fff;
float: right;
text-align: right;
padding:5px;
}
Hope you will like this design
I want to be able to resize the window while my divs keep their position on the page AND resize to a % of width and height I declare.
HTML:
<body>
<div class="view">
<div class="Tree">
<img id="tree" src="img/tree.png">
</div>
<div class="Ground">
<div class="g"></div>
</div>
</div>
</body>
CSS:
.Tree {
position: absolute;
}
.Tree #tree {
position: relative;
height: 75%;
width: 75%;
left: 30%; }
.Ground {
z-index: 2;
width: 100%;
height: 100%; }
.Ground .g {
background-color: green;
opacity: .5;
position: relative;
height: 50%;
width: 100%; }
The tree stays pretty constant, but when the window is the largest it can be on my macbook, it slides over to the left a little. The ground element vertically takes up half the page, I instead want it to only be placed 50% from the top. When I try to apply the 'top' style to either of them nothing happens. I know this is because the #tree is relative to .Tree and I don't declare a height/ width. I don't declare a h/w because it makes my #tree image's w/h off.
Thank you for the help!
Edit, added clarification:
I want the divs to resize according to the window width. I don't want them to change their left position. And I want to be able to set a 'top' % because I currently can't.
Fiddle: https://jsfiddle.net/sqdgzbp6/
Notice on this website: anniwang.com that if you resize your entire window the drawings seem to also resize BUT they don't loose their position on the page. I want to recreate an effect similar to hers.
As the .Tree is an absolute positioned element, it need a height/width set explicit or else no child with percent will have anything to calculate their percent from, so in this sample I gave it a height and now top will work.
.Tree {
position: absolute;
height: 100%;
width: 100%;
}
#tree {
position: relative;
height: auto;
width: 60%;
left: 30%;
top: 20%;
}
.Ground {
z-index: 2;
width: 100%;
height: 100%;
}
.Ground .g {
background-color: green;
opacity: .5;
position: relative;
height: 50%;
width: 100%;
}
<div class="view">
<div class="Tree">
<img id="tree" src="http://www.placehold.it/200/100">
</div>
<div class="Ground">
<div class="g"></div>
</div>
</div>
By the sound of it, you want divs to stop resizing when you've previously set a size of 50%. Remember this is only 50% of the window screen, so no matter how big or small the window, it will always scale to 50% of whatever you're viewing on. If you want it to be fixed, you could use 500px that way it doesn't move because it's set to a fixed 500.
Hope this helps.