Tips for maintaining the size of an object while resizing a window

My circles are designed to increase in width at regular intervals, and once they reach a certain scale, they disappear and start over. However, every time I resize the screen or zoom in and out, the circle gets distorted into an oval or stretched object. How can I maintain the circular shape of the circle when the screen is resized?

HTML

<div id="container">
    <div id="name-div">
        <h1 id="name">Open Touch</h1>
    </div>
    <ul class="bubbles">
        <li id="firstCircle"></li>
        <li id="secondCircle"></li>
        <li id="thirdCircle"></li>
        <li id="fourthCircle"></li>
        <li id="fifthCircle"></li>
        <li id="sixthCircle"></li>
    </ul>
</div>

CSS

.bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
}

.bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    border-radius: 100%;
    -ms-animation: fadeAndScale 33s ease-in infinite;
    -webkit-animation: fadeAndScale 33s ease-in infinite;
    -moz-animation: fadeAndScale 33s ease-in infinite;
    -o-animation: fadeAndScale 33s ease-in infinite;
    animation: fadeAndScale 33s ease-in infinite;
    transition-timing-function: linear;
}
/* The first Circle animation------------------------------------------------------------------------------------------------ */
.bubbles li:nth-child(1) {
    width: 9%;
    height: 20%;
    top: 20%;
    left: 20%;
    background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
    animation-name: firstCircle;
}
/* Mozilla First Circle Animation */
@-moz-keyframes firstCircle {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* Webkit First Circle Animation */
@-webkit-keyframes firstCircle {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
@-ms-keyframes firstCircle {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes firstCircle {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End first circle animation -------------------------------------------------------------------------------------- */\

/* Begin Second Circle Animation ------------------------------------------------------------------------------------ */
.bubbles li:nth-child(2) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 40%;
    top: 40%;
    animation-name: secondAnimation;
}
/* Webkit Second Animation */
@-webkit-keyframes secondAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Second Animation */
@-moz-keyframes secondAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* Ms Second Animation */
@-ms-keyframes secondAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes secondAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End of Second Circle ------------------------------------------------------------------------------------- */

/*Begin of Third Circle ----------------------------------------------------------------------------------- */
.bubbles li:nth-child(3) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 60%;
    top: 10%;
    animation-name: thirdAnimation;
}
/* Webkit Third Animation */
@-webkit-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Third Animation */
@-moz-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* MS Third Animation */
@-ms-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes thirdAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End of the Third Circle --------------------------------------------------------------------------------------------------------- */

/* Begin of Fourth Circle Animation ----------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(4) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 10%;
    top: 60%;
    animation-name: fourthAnimation;
}
/* Webkit Fourth Animation */
@-webkit-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Fourth Animation */
@-moz-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* MS Fourth Animation */
@-ms-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes fourthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* END of Fourth Animation ------------------------------------------------------------------------------------------------ */

/* Start of Fifth Animation -------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(5) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 50%;
    top: 10%;
    animation-name: fifthAnimation;
}
/* Webki Fifth Animation */
@-webkit-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
@-moz-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
@-ms-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes fifthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
/* End of the Fith Circle ----------------------------------------------------------------------------------------------------- */

/* Start of the Sixth Circle ------------------------------------------------------------------------------------------------- */
.bubbles li:nth-child(6) {
    width: 9%;
    height: 20%;
    position: absolute;
    left: 80%;
    top: 60%;
    animation-name: sixthAnimation;
}
/* Webkit sixth animation */
@-webkit-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -webkit-transform: scale(0);
    }
    100% {
        z-index: 0;
        -webkit-transform: scale(200);
    }
}
/* Mozilla Sixth Animation */
@-moz-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -moz-transform: scale(0);
    }
    100% {
        z-index: 0;
        -moz-transform: scale(200);
    }
}
/* MS Sixth Animation */
@-ms-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
@-o-keyframes sixthAnimation {
    0% {
        z-index: 100;
        -ms-transform: scale(0);
    }
    100% {
        z-index: 0;
        -ms-transform: scale(200);
    }
}
javascriptjqueryhtmlcss

Answer №1

Instead of specifying width and height in percentages, it is recommended to use pixels. Modify the following code:

width:100%;
height: 100%;

to

width:100px;
height: 100px;

and give it another try.

Explanation: When you define height and width in percentages, they will adjust based on the size of the container, which in this case is the browser window. However, if you specify them in pixels, they will remain constant regardless of the container's dimensions.

Answer №2

Should you find yourself facing the issue I believe to be the case, consider utilizing the following code:

width:100vw;
height: 100vh;

By applying this CSS, your div element will perfectly match the dimensions of the window.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch up the div background image with a click using jQuery

Hey there, I'm struggling with changing a div background image. Here's what I want to achieve: I have a set of images with an onclick event "change_color()" and also some divs with an onclick event "get_color()". What I'm trying to do is wh ...

jquery

Updating variable values using buttons in PHP and Javascript

I've implemented a like/unlike button along with a field displaying the number of likes. The code below uses PHP and HTML to echo the variable that represents the total number of likes: PHP-HTML: <span>likes: <?php echo $row['likes&apo ...

javascriptphponclickincrementdecrement

Submit a HTML form to a Telegram recipient

I am looking to send HTML form data, which includes input values and select options, to a telegram user. After some research, I discovered that I need to create a Telegram bot. I successfully created one using @botFather by following these steps: /newbot ...

javascriptjqueryajaxformstelegram

"Unlocking the door: a step-by-step guide to logging in with ajax and json for your hybrid

As a beginner coder, I am currently working on a project to create a mobile web login form using json and ajax. To test my code, I followed the tutorial provided here. This is the code I have developed: <!DOCTYPE html> <html> <head> ...

javascriptphpjqueryajaxjson

Retrieving particular excerpts from a block of text that includes the keyword "javascript."

I have a chunk of string containing HTML source code. Currently, I am trying to read specific tags that I need using JavaScript. Since I am new to programming, I'm unsure how to proceed. Can anyone assist me with this? The issue lies in the following ...

javascripthtmlregextags

Ensuring payload integrity using microrouter: A step-by-step guide

I have utilized this code to develop a microservice const { json, send } = require('micro') const { router, post } = require('microrouter') const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY) console.log(process.e ...

javascriptnode.jsmicroservices

The People and Groups selection dialog is displaying incorrectly in IE 10

I've been working on a Sharepoint web application and have created a site column of type “People or Group”. This should be automatically associated with a user selection dialog as shown below: However, as you can see in the image above, the users ...

javascriptjqueryhtmlcsssharepoint

A rightward sliding submenu that appears upon clicking a button

I have a vision of creating an admin control panel for my website, featuring a set of buttons. I envision that when one of the buttons is clicked, the corresponding sub-menu will appear alongside it. For instance, if "My Account" is selected, its sub-menu ...

htmlcssweb

A Vue.js trick to modify the element's class within a v-for loop when hovering in and out

I'm having trouble changing the class of a single element within a v-for loop based on mouseenter/mouseleave events. I want only the hovered element to change its class, but currently, all elements in the list are affected. I attempted binding the cl ...

javascripthtmlcssvue.js

Why am I encountering an issue while trying to access req.user.id?

Having set up passport authentication on my express, node project, I encountered an error when trying to access req.user. The error message displayed is Property 'id' does not exist on type 'User'.ts(2339). Below is the relevant code sn ...

javascriptnode.jstypescriptexpresspassport.js

Animate the chosen text via specialized effects

I am trying to implement a show/hide feature for specific text using jQuery. The challenge I am facing is having multiple instances of the same text tag with identical ids. I want to trigger the animation on a particular child element when hovering over it ...

jqueryhtml

Retrieve data from two separate files and store it as a two-dimensional array in JavaScript

Is there a way to read and convert two .txt files into a 2d array? I currently have a code snippet that looks like this : var fs = require('fs') file = './text1.txt' fs.readFile(file,'utf-8', (e,d) => { textByLine = d.s ...

javascriptarraysnode.js

Exploring Grunt (node): Ways to Display Available Tasks

While I am accustomed to using Rakefile, Cakefile, and Jakefile, each of them offered a convenient method for listing the tasks available. For example: jake -T jake db:dump # Dump the database jake db:load # Populate the database ...and so ...

javascriptnode.jscommand-line-interfacegruntjsjake

How to set a custom background image for the Django admin panel

I am struggling to display a background image in the Django admin site. Despite researching multiple solutions, none of them seem to work for me. All I want is for the background to be visible behind the admin site. I have a file named base_site.html. {% ...

cssdjangoadmin

Display a list exclusively with radio button options

Currently, I am developing a module that allows the admin to view a list of candidates who have requested approval. The interface includes radio buttons for three different selections and a submit button. However, I would like to update this functionality ...

javascriptphpjquerymysqlajax

Enhancing JavaScript Arrays by incorporating data from a JSON file

Could you kindly advise me on what I might be doing incorrectly here? It seems like a simple issue, but it has taken up the entire day. All I wanted to do was add a value to an array called messages from a JSON file. function get_message(params) { va ...

javascriptjqueryjson

The wells are surpassing the line

I'm attempting to arrange 3 Wells horizontally in one row, as shown below <div class="row" style="margin-top: 10px"> <div class="span4 well"> <h3 class="centralizado"><img src="/assets/temple.png" /> & ...

csstwitter-bootstraptwitter-bootstrap-rails

Retrieve the color of the TripsLayer in deck.gl

layers.push(new TripsLayer({ id: 'trips', data: trips, getPath: (d: Trip) => d.segments.map((p: Waypoint) => p.coordinates), getTimestamps: (d: Trip) => d.segments.map((p: Waypoint) => p.timestamp), ...

javascriptjsonwebdeck.glgetcolor

What is the process for developing multiple screens or views in PhoneGap?

Currently working on a reading app and decided to give phoneGap a shot for the first time. I'm pretty proficient in HTML, CSS, and JS, but not very familiar with xCode. In this app, I plan to have a button on the home screen that redirects users to an ...

ioscsscordovamobile

What is the best way to change the size of an SVG image

I have exhausted all the methods I could find on stackoverflow and Google, but my SVG is refusing to resize. Would someone kindly shed some light on why this might be happening? <div> <svg viewBox="32 32 32 32" height="100" width="100"> ...

htmlcsssvg