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.
Related
On an image upload page I have a preview of the image. I would like create an overlay that shows the image in a rectangle in the middle, with an opaque overlay around the outside of the rectangle.
Similar to this:
I am able to create a div overlay, but I need to reverse the opaque black background to be on the rest of the image but not on the rectangle. This way I can preview to the user what the final product will look like.
Here's what I have:
.wrapper {
position: relative;
height: fit-content;
width: fit-content;
display: flex;
}
.overlay {
max-width: 100%;
height: 100%;
aspect-ratio: 1 / 1.42;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 150px;
border-radius: 0.5rem;
}
<div class="wrapper">
<img src="https://picsum.photos/500/300"/>
<div class="overlay"></div>
</div>
Requirements
I need to keep the aspect-ratio and relative size of the rectangle consistent.
No magic numbers or fixed width/height unless dynamically calculated per image, these images will be any size or dimensions and the layout needs to be responsive to (nearly) any screen size.
I can't change the markup too much because I'm working with the drag and drop api to move the rectangle within the image wrapper by changing its left and top positions.
I would like to use CSS or Javascript to solve this, not more HTML
Not looking to use object-fit: cover as I need the entire image visible in its native dimensions.
I hope the below code meets your requirements and solves your problem.
.wrapper {
position: relative;
height: fit-content;
width: fit-content;
display: flex;
}
.overlay {
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 0.5rem;
width: 100%;
overflow: hidden;
}
.overlay:before{
position: absolute;
content: '';
aspect-ratio: 1 / 1.42;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
box-shadow: 0px 0px 0px 145px rgba(0, 0, 0, 0.4);
}
<div class="wrapper">
<img src="https://picsum.photos/500/300"/>
<div class="overlay"></div>
</div>
On my website I am building a custom HSV Color picker.
Instead of using Gradients I've decided to opt for a .SVG Gradient image that I will use in my HSV Slider.
I am having a problem with the fitting of that Image into the Background of my DIV.
Here's an example.
The Image is fitted perfectly in both Mozilla Firefox and Internet Explorer, but in Edge it looks as if only the "height" is at a "100%", and the "width" is "auto" - Which it is not, at least not in the CSS:
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
}
How would I go about solving this issue?
Appreciate all the help!
SVG is still buggy in Edge. Therefore, I advise to use old school .png or .jpg images if you don't require a vector image.
Check out the working example:
/* Demo Styles */
.picker {
height: 150px;
width: 200px;
position: relative;
margin: 0 auto;
background-color: #e9e9e9;
}
/* Hue Slider */
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Hue_alpha.png/900px-Hue_alpha.png');
background-size: 100% 100%;
background-color: white;
display: flex;
}
<div class="picker">
<div id="pvdivsliderhue"></div>
</div>
Make the margins and padding 0
#pvdivsliderhue {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
width: auto;
height: 30px;
border-radius: 15px;
background-image: url('images/pvhue.svg');
background-size: 100% 100%;
background-color: green;
display: flex;
margin :0;
padding :0
}
Try background-size: cover or background-size: container. I hope it will solve your problem.
I have a wiper div which I want to use to wipe diagonally through a parent div.
The wiper div has the following class:
.wiper {
position: absolute;
height: 100%;
top: 0;
left: 0;
background-color: orange;
transform: skew(45deg);
}
I want the wiper to start offscreen to the right, and end offscreen to the left.
When the wiper is halfways, the screen must be completely filled by the wiper.
The problem is, I don't know how big the wipers parent is. So I need to calculate the following:
Width: How wide in percent must the wiper be, to fill the screen when it is halfway.
Startleft: What should the starting left property be in percent, for the wiper to be just offscreen right.
Endleft: What should the ending left property be, for the wiper to be just offscreen left.
Here is an example in jsfiddle, but with hardcoded values. I just don't know how to calculate the relative values, when dealing with a skewed div.
http://jsfiddle.net/jpg850kx/22/
I would do something differently using gradient where you don't need complex calculation:
body,
html {
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: hidden;
padding: 20px;
}
#wrapper {
width: 60%;
height: 100%;
position: relative;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
color: white;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.wiper {
position: absolute;
height: 200%;
width: 400%;
top: 0;
left: 100%;
z-index:1;
background-image:
linear-gradient(to bottom left,orange 49.5%,transparent 50%),
linear-gradient(to top right,orange 49.5%,transparent 50%);
background-size:50.1% 100%;
background-repeat:no-repeat;
background-position:left,right;
transition:all 3s;
}
#wrapper:hover .wiper{
left:-300%;
}
<div id="wrapper">
<div class="content">
Old content
</div>
<div class="wiper"></div>
</div>
I want to make the image only to be a link only and not outside of the picture with support of overlay functionality. I have problem to make the picture to make as a link only in relation to overlay. Today, the layout is perfect but not the link.
#aaa {
position: fixed;
left: 0;
display: block;
width: 128px;
height: 845px;
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
A more responsive solution would be to use flexbox layout:
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
display: flex;
align-items: center;
}
#aaa {
display: block;
width: 128px;
height: 128px;
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
<div class="overlay">
</div>
You can also align this centrally, like in the followin example:
http://codepen.io/jaycrisp/pen/ZQMEBm
You need to change the height of the link to same height as the image - 128px. Then display inline-block so the link state is exactly as you have specified. To get the link to be in the middle of the page you want it to be 50% from the top of the page minus half the height as a margin.
#aaa {
position: fixed;
left: 0;
display: inline-block;
width: 128px;
height: 128px;
margin-top:-64px;
top:50%;
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
#aaa:hover {
background: url('https://cdn2.iconfinder.com/data/icons/food-drink-3/512/Candy-128.png') no-repeat 50% 50%;
}
I am looking for a way to have a fixed width div centered in the display with divs to the left and right that re-size to fill the display. I am currently accomplishing this with a javascript window.resize function. The reason I want the divs to resize instead of just spill off screen is I actually want the images inside those divs to compress and expand. Is there a way I can accomplish this with just css?
Here is an example of my current markup:
HTML
<body>
<div id="wrapper">
<div id="center">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
CSS
body {
margin: 0px;
min-width: 1024px;
font-size: 14px;
line-height: 20px;
}
#wrapper {
position: absolute;
top: 0px;
left: 0px;
height: auto;
min-width: 1024px;
width: 100%;
background: #7c7b79;
overflow: hidden;
}
#center {
position: relative;
width: 1000px;
height: auto;
margin: 0px auto;
}
#left {
position: absolute;
top: 0px;
left: -610px; //I do want slight overlap
width: 630px; //full width of image
height: 100%;
overflow: hidden;
}
#right{
position: absolute;
top: 0px;
right: -610px; //I do want slight overlap
width: 630px; //full width of image
height: 100%;
overflow: hidden;
}
javascript
$(window).resize(function(){
var browser_width = $(window).width();
if(browser_width >1100){ //below this width stop compressing
var width = ((browser_width - 1000)/2)+ 20;
$('.mid_pat2').css({'width': width, 'right': -(width-20), 'min-width': 30});
$('.mid_pat1').css({'width': width, 'left': -(width-20), 'min-width': 30});
}
});
You can do that with table-cell (IE8+), or flex (IE10).
Here's an example with table-cell.
HTML:
<div id="wrapper">
<div id="left">a</div>
<div id="center">a</div>
<div id="right">a</div>
</div>
CSS:
#wrapper {
display: table;
width: 100%;
}
#left, #center, #right
{
display: table-cell;
}
#center {
width: 400px; /*fixed*/
background-color: yellow;
}
#left {
background-color: red;
}
#right {
background-color: blue;
}
If the view port width is smaller then the fixed width, the table will not overflow, but instead the columns will shrink (and the fixed column will try to take as much space as possible)