How to make pictures grow and shrink together in CSS with absolute position

user_17244297 0
Viewed 125

If I have to use absolute position to keep the background picture and picture of the vector on the top of the page, but when I resize the window, even though the background picture shrinks, the vector stays in the same position. Is there a way to keep both at the top of the page and the vector to stay at the same relative position to the background image, and for them to grow and shrink together? What they currently look like after shrinking and what I want

CSS:

.landingImage {
    z-index: 0;
    background-size: fill;
    background-size: 100vw 100vh;
    top: 0;
    padding: 0;
    display: grid;
    width: 100%vw;
    max-height: 944px;
}
    
.landingText {
    position: absolute;
    z-index: 0;
    background-color: black;
    color: white;
    text-align: left;
    align-items: left;
    margin-top: 200px;
    margin-left: 100px;
    top: 0;
}
        
.wrapper {
    position: absolute;
    z-index: 0;
    margin-top: 500px;
    margin-left: 500px;
    top: 0;
}
        
.vector{
    
}

HTML:

<Image className={indexStyles.landingImage} src={orcas} />

<div className={indexStyles.wrapper}>
    <Image className={indexStyles.vector} src={vector} />
</div>
css image html
1 Answers

Is my snippet the solution to your question? I wasn't completely sure if I understood it.

If I did: Create a container for your impression and vector and make sure to set the container to position: relative;. Then give the impression a width of 100%. Give the vector a position: absolute; and calculate how to position it in the middle and how what the distance should be from the bottom of the container.

.landing{
  position: relative;
}

.impression{
  width: 100%;
  height: 100px; /* auto or remove this */
  border: solid 1px black; /* remove this */
}

.vector{
  width: 5vw;
  height: 5vw; /* auto, remove or unit like this: if you want to scale it use same unit (vw) as width */
  border: solid 1px black; /* remove this */
  
  position: absolute;
  bottom: 10%;
  left: calc((100% - 5vw) / 2); 
}
<nav>
  <button>example</button>
</nav>

<div class="landing">
 <img class="impression" src="orcas.jpg">
 <img class="vector" src="vector.svg">
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

user_179070840
Related