I am using Visual Products Configurator as per client needs. The product is a bike, and it is divided into 4 parts.
Bike body
Front wheel
Back wheel
Seat
I am trying to fix them in one place, but when I decrease my window size (responsiveness), it moves to another place. I am using % for width, left & right etc properties. But it still not fitting in one place.
Seems like i will have to make a lot of media queries for it?
I am finding a short solution, a better solution.
Code:
#vpc-preview {
padding: 30px;
position: relative;
}
#vpc-preview img {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
max-width: 100%;
width: 100%;
display: block;
}
#vpc-preview img:first-child {
max-width: calc(100% - 100px);
position: relative;
}
#vpc-preview img:nth-child(2) {
width: 15%;
left: 34%;
top: 39%;
transform: translate(-50%, -50%);
}
#vpc-preview img:nth-child(3) {
width: 25%;
inset: auto auto 5px 7%;
}
#vpc-preview img:last-child {
max-width: 25%;
inset: auto 15% 5px auto;
}
<div id="vpc-preview"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Body.png" style="z-index:1" data-component-id="component-61c5cd5b45c6d"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Seat.png" style="z-index:1" data-component-id="component-61c5cd5b1e09c"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Tire-Front.png" style="z-index:-1" data-component-id="component-61f2bc32489e0"><img src="https://pace-bike.hadithapi.com/wp-content/uploads/2021/12/Tire-Rear.png" style="z-index:-1" data-component-id="component-61f2bc7c570e7"></div>
I am stuck, don't know how to make it perfect so that it works for other screens too. Please help me.
Use one container with 4 areas (seat, tire1, tire2, body).
All your photos should be the same proportion from the start.
Then you position your zones in % and you also adjust their size in % compared to the container.
Only Percent, no Pixel units.
Or use Canvas
You can Also use the margin-bottom, margin-right, margin-left, margin-top to change the position of it
Related
In my program, I need to place the image of a button on top of another image exactly where that button is supposed to be. To be able to use it in different monitor resolution, I position the images using %. I also set up height and width of the body (or div) to 100vw and 100vh (i also tried to screen.height and window.height). But when I change resolution of the monitor, the images adjust to the new resolution but now with enough precision y the height (width is fine). The button is displayed a little bit higher in a lower resolution. Why is not working?
.alarm img {
position: fixed;
width: 4.5%;
left: 41.7%;
top: 71%;
}
.faceplate img {
position: fixed;
width: 17%;
left: 40%;
top: 40%;
margin-left: 0px;
margin-top: 0px;
}
<html>
<body style="width:100vw; height:100vh; margin:0;padding:0">
<div_logo class="faceplate"><img src="pictures/asel3_faceplate.png">
<div_alarm class="alarm"><img src="pictures/asel3_alarm.png"></div_alarm>
</div_logo>
</body>
</html>
You should use media queries to fix this problem for different screen sizes. You have to create different types of CSS for different types of screen sizes.
In this fact, you have to go to media queries.
For more details, you can follow the link
https://www.w3schools.com/HOWTO/howto_css_media_query_breakpoints.asp
In media, query defines your CSS style for different screen sizes.
I hope this is what you are expecting.
.faceplate {
top:25%; /* just change this */
left:25%; /* just change this */
position: absolute;
}
body {
height: 100vh;
width: 100vw;
margin: 0;
position: relative;
padding: 0;
}
.faceplate {
top: 25%;
left: 25%;
position: absolute;
}
.faceplate > img {
width: 90%;
height:90%;
}
.faceplate .alarm {
position: absolute;
top: 0;
}
.faceplate .alarm > img {
width: 70%;
height: 70%;
}
<html>
<body>
<div class="faceplate"><img src="https://dummyimage.com/100x100/e055e0/fff">
<div class="alarm"><img src="https://dummyimage.com/80x80/000/fff"></div>
</div>
</body>
</html>
I'm working on a face recognition webapp, but I'm encountering some problems trying to "fix" the bounding box on the image making it responsive. If the screen is in full size that's the (correct) result:
But as soon as I try to resize the window browser, making it smaller, the box lose its position like this:
.image-container {
position: relative;
display: inline-block;
img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
}
.box {
display: flex;
flex-wrap: wrap;
justify-content: center;
position: absolute;
border: 2px solid red;
}
<div>
{this.setRecognitionType()}
<div className={styles["image-container"]}>
{this.state.box ? (
<div
className={styles.box}
style={{
top: this.state.box.top,
right: this.state.box.right,
bottom: this.state.box.bottom,
left: this.state.box.left
}}
/>
) : null}
<img id="image" src={this.props.imageUrl} alt="" />
</div>
</div>
EDIT
Box's proptery in this case:
top: 192px;
right: 85px;
bottom: 118px;
left: 92px;
EDIT: SOLUTION
As already answered, the only way seems to be using percentage instead of px.
The way I sorted out:
left: (coords.left / imageWidth) * 100,
top: (coords.top / imageHeight) * 100,
right: ((width - coords.right) / imageWidth) * 100,
bottom: ((height - coords.bottom) / imageHeight) * 100
"imageHeight" and "imageWidth" are the original picture's sizes and coords are the coordinates in pixels.
Your code isn't producing the desired effect since you're positioning the box with static units. As the picture gets smaller, the box will always be 192px from the top, 85px from the right, etc. Try using percentage units instead similarly to this (obviously play with the numbers until it looks right):
top: 30%;
right: 5%;
left: 5%;
bottom: 15%;
I'm trying to overlay 5 images that are all the same size, namely 614 w x 814 h. Because parts of each image are transparent, together they make one whole picture. I can't use my original images to show you because they've got personal data on them. Instead I used color blocks to show you an example I've made.
Fiddle
I'm trying to center all of the images in the center of the screen, and it's crucial that they remain there, no matter how far the browser is zoomed in, or if the window is resized. To do that, I use this code per image:
#blue{
margin-top: 10%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 33%;
height: 100%;
}
My question is: How do I center these 5 images in the middle of the screen, having all them overlay eachother like so; blue < green < purple < yellow < red. And still keep them positioned so that there's no space between each image, so that they may form one block of five different colors?
Is there an easier, more accurate way of doing this than what I've shown you in the fiddle?
I found out a solution. I used this code per color block, which was what I needed
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
Put them all in a single div and center that - Paulie_D
Cenctered container with image(s).
html {
height: 100%;
}
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container img {
position: absolute;
top: 0;
left: 0;
}
.container img:nth-of-type(1) {
position: relative;
}
<div class="container">
<img src="http://lorempixel.com/g/100/100" />
<!--place images here!-->
</div>
I have difficulty phrasing this question correctly, but I'd like to have two divs sharing the same height in a fixed-height container. So the #container element would have a fixed height of e.g. 500px; the #upper and #lower elements can grow taller and smaller during their lifetimes, but can never exceed 500px. If the two inner elements start overlapping they should reach a maximum height and let users employ scrollbars.
I included a picture to clear things up:
And some sample (non-working) CSS that conceptually shows what I'd like to do:
#container {
position: absolute;
height: 500px;
}
#upper {
position: absolute;
top: 0;
left: 0;
right: 0;
min-height: 10%;
max-height: 90%;
overflow: auto;
}
#lower {
position: absolute;
bottom: 0;
left: 0;
right: 0;
min-height: 10%;
max-height: 90%;
overflow: auto;
}
Using CSS:
Limiting the height of an element to its parent's height (or a percentage of) is possible.
Limiting it dynamically based on the height of another element is not possible, and will require an actual programming language (i.e. javascript).
As a sidenote, the only situations I can envisage where you would need this functionality (rather than just setting say, max-height:50%; on both elements) are where you'd be populating the elements using javascript anyway...?
You could try the following bellow, but this would be easier if I had something than my imagination to work with.
http://codepen.io/DanielMinett/pen/uEdFv
#container {
width: 300px;
height:500px;
background-color: #CCCCCC;
padding: 15px;
position:relative
}
#upper {
background-color: #1E90FF;
min-height: 10%;
max-height: 90%;
padding-top: 3px;
padding-left: 5px;
}
#lower {
background-color: #EE8833;
min-height: 10%;
max-height: 90%;
padding-top: 3px;
padding-left: 5px;
position:absolute;
bottom:0;
I'm trying to create this design for a WP template:
http://minus.com/lbi1iH25EcKsu7
Right now I'm like this: http://www.uncensuredftw.es/plantilla-blueftw/boilerplate/index.html
I think you can get the general idea ;)
I know...it's my fault: The browser calculate the size of the window from left to right, so if I put a margin it will move the div with the 100% size to de right.
But the thing is: I don't know how to make it work :(.
I wanted to make the "black bars" with divs (I painted the ones than don't work in red and orange) and the trick worked...but only the left ones works like I want.
I'm getting out of ideas. I tried like everything I could think off, and nothing works.
Maybe you can help me? ;)
This is the html code:
<div class="barraUL"></div><div class="barraDL"></div>
<div class="presentacionbg"></div>
<div class="presentacion">
<div class="barraUR"></div><div class="barraDR"></div>
And this the css:
.barraUL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: -20px;
}
.barraDL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: 309px;
}
/* This next two are the ones than "doesn't work" */
.barraUR {
position: absolute;
width: 50%;
height: 27px;
background-color: red;
left: 50%;
margin-left: 500px;
margin-top: -4px;
}
.barraDR {
position: absolute;
width: 50%;
height: 27px;
background-color: orange;
left: 50%;
margin-left: 500px;
margin-top: 325px;
}
The right divs are expanding to 50% the window width. For a liquid layout where the bars extend to the length of the window and then cut off, you'd usually make an underlaying div (in this case the bars and the black patterned background) and then expand it to 100% of the window. You can't make an additive layout using relative lengths like percent (left div + fixed middle image + right div) with just CSS (especially not with absolute positioning). If you insist on using this, you'll have to overflow: hidden; the html {} or body {} tag after centering your content and that's just bad practice. I recommend just having two long divs go all the way across the screen under your sprite image.