'how to scale down absolute positioned elements in the right way using CSS

i would like to ask how to scale down elements given absolute position so that they dont distort on reducing the screen size. Like i have attached an image below that shows the desktop view now how should i set the style of these elements so that on mobile view they should remain in same proportions (any other way except media queries?)

max-size min-size

JSX code:

     <div className={styles.relativeParent}>
          {/* <img src="/home_6.png" alt="lamp" className={styles.lamp} /> */}
          <div className={styles.obj_container}>
          <img src="/home_lamp.png" alt="lamp" className={styles.lamp} />
          <img src="/home_10.png" alt="plane" className={styles.plane} />
          {/* <img src="/home_7.png" alt="lamp-light" className={styles.lampLight} /> */}
          <p className={`${styles.homeSubHeading} ${styles.narrowHeading}`}>
            Finding it difficult to start? We’re here to{" "}
            <span className={styles.gradient}>help</span>{" "}
          </p>
          </div>
          <p className={`${styles.homeContent} ${styles.narrowText}`}>
            At Raisze, whether you’re a student, designer, young professional,
            restarting your career or a visionary and dreamer, as long as you’re
            a startup builder, you will find support. We help early-stage
            startups validate, raise funds and find first customers with a
            platform that enables reward based crowdfunding.
          </p>
        </div>

css code :

.obj_container{
  position: relative;
}

.lamp {
  position: absolute;
  top: -1.5rem;
  right: 22rem;
  width: 9rem;
}

.plane {
  position: absolute;
  width: 9rem;
  top: 2rem;
  left: 13rem;
}

.lampLight {
  position: absolute;
  width: 10rem;
  top: -2rem;
  right: 25rem;
}
.homeSubHeading {
  margin: 0;
  margin-bottom: 1rem;
  font-size: 3rem;
  font-weight: bold;
}
htmlcssreactjsmedia-queriesjsx


Solution 1:[1]

Here's how to fix this problem:

  • To prevent distortion of images, set height of images to auto.

  • For proportional resizing of images with respect to parent element (.obj-container) on screen resize, use percentage values for widths.

  • To prevent erratic positioning/displacing of images on screen resize, use percentage values for positioning. (Positioning with respect to rem means you are positioning the <img>s with respect to the font-size of the parent element or browser if parent element has no font-size define. This will only work so well at certain screen sizes but it is not enough. You need to position with respect to parent element's dimensions, hence percentages.)

  • For items 2 and 3 above to work properly, you need to give the <img>s' parent element (.obj-container) a width and height.

Like so (I use ellipsis ... for brevity):

.lamp {
    ... 
    top: -1.5%;
    right: 22%;
    width: 10%;
    height: auto;
}

.plane {
    ... 
    top: 2%;
    left: 13%;
    width: 15%; 
    height: auto;
}

.lampLight {
    ... 
    top: -2%;
    right: 25%;
    width: 10%;
    height: auto;
} 

.obj_container {
    position: relative;
    width: 100vw;
    height: 60vh;
    max-height: 80vh;
}

The top left, right and width values I gave for the <img>s are example values, feel free to change these values to whatever you desire.

Also, as you can see, I gave the .obj-container div a width of 100vw meaning it will take up the entire viewport (i.e screen) width. I also gave it a height of 60vh and a max-height of 80vh to handle resizing on smaller screens. You may change this values to whatever you desire as well.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chizaram Igolo

Related Questions