We Keep Coding

Prevent the distortion of HTML elements when increasing zoom percentage?

I'm working on the UI for a website and it looks perfect when the zoom is set to 75%. But if I zoom in any more than that, shapes get wonky and elongated, and distorted. For example, a <div> that should be a square will become a rectangle.
What I want: To completely prevent this from happening, I want the shapes to remain in their original state and for the page to not change in appearance upon zooming in/out. The only thing I want zooming to do is to zoom in on something, not enlarge it or distort it.
Here are some pictures of what I mean:
How it should look - <div>s are square-shaped here:
How I don't want it to look after zooming in:
Tried: setting a specific height and width for all divs in the CSS.
For example,
height: 200px;
width: 250px;
Did not work!
Any help is greatly appreciated! I do not want anything to change size or shape at all! By the way, I am using Bootstrap on my page.
Here is my HTML:
<div class="col-3">
<div class="wrapper-vids">
<div class="stranger-peer-vid">
<video class="video-s" id="videoS" autoplay></video>
</div>
<div class="local-peer-vid">
<video class="video-l" id="videoL" autoplay></video>
</div>
</div>
</div>
Here is the corresponding CSS:
.wrapper-vids {
margin:11px;
contain: content;
}
video {
transform: scaleX(-1); /* mirror effect*/
-webkit-transform: scaleX(-1); /* mirror effect*/
}
.stranger-peer-vid {
height: 350px;
width:480px;
background: black;
}
.local-peer-vid {
height: 350px;
width:480px;
background: black;
margin-top: 5px;
}
.video-l {
height: 350px;
width:480px;
left: 0;
bottom: 0;
}
.video-s {
height: 350px;
width:480px;
}

iframe Fits complete webpage as on Full HD Screen in to a small Window

In first Picture I have 6 iframes being loaded and each having its own HTML page. All pages in those iframes are responsive so they got adjust as per the size.
But I want to make it look like exactly the same those HTML pages would look in 1920x1080 resolution screen (shown in image 2)
Image 2 is the HTML page being loaded in the second row first iframe of Image 1

You can set the high resolution to the frame by default and then zoom and scale it down to the required size.
All you have to do is calculate zoom/scale from starting width to required width.
Which should be required width divided by starting width.
Source of the code with examples.
#your-frame {
width: 1920px;
height: 1080px;
}
#your-frame {
zoom: 0.50;
-moz-transform: scale(0.50);
-moz-transform-origin: 0 0;
-o-transform: scale(0.50);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.50);
-webkit-transform-origin: 0 0;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#your-frame {
zoom: 1;
}
}

You probably forgot to set the size to iframes. The code below helped me without any problems:
CSS Code:
div {
width: 31%;
height: 294px;
margin: 0 auto;
}
iframe {
width: -webkit-fill-available;
height: -webkit-fill-available;
overflow: hidden;
border: 0;
}

CSS to position image a percentage of another image

Say I have an image that has width
width: 100vw;
Is it possible to position a title say 50% of the way down from this image? I can't think of how to do it as the height will be changing based on the vw, so can this be done with CSS only, or do I need Javascript? Either way, how would I do this?
Thanks
Edit: I have tried the various suggestions below but it seems that whenever I try to use solely CSS with position:relative it messes up the rest of my code. Is there a javascript function, therefore, that can calculate the height of the image as a % of the page height, and then can I position my title at say 75% of the height of the image?

I'm not entirely sure if I've understood you correctly or not, but if you want to vertically centre a piece of text over the top of a responsive image, you could do this:
div {
position: relative;
}
img {
width: 100vw;
height: auto;
}
p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
<div>
<img src="https://unsplash.it/200/100/?random">
<p>SOME TEXT</p>
</div>
https://jsfiddle.net/fjh6msqL/

Sure, add a parent around the image and set it to inline-block so that it will match the width of the image, add position: relative so that you can absolutely position your title text in relation to the parent, and then either add an element with your title text or use a pseudo element from the parent (that's what I did in this example) and absolutely position that 50% from the top, and use translateY(-50%) to move the image back up 50% of it's own height so it's in the middle of the image vertically. Here is a good article on how to center stuff using CSS https://www.w3.org/Style/Examples/007/center.en.html
div {
display: inline-block;
position: relative;
}
div:after {
content: 'here is your title';
color: white;
background: black;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
img {
width: 100vw;
}
<div class="parent">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</div>

You can't really do that with an image without using some Javascript. The best solution I think would be to use a div element and set it's background-image property to the image you want to display, and then position your title vertically inside the div. Something like this:
<div style="background: url('url-to-image') no-repeat; background-size: cover; background-position: center center;">
<h2 class="title"></h2>
</div>
Vertical positioning can be tricky, but there are ways, for example:
CSS Vertical align middle

With CSS margin:auto , max-height:0 with absolute position actually does the magic. this will center your title text perfectly regardless of screen size. Instead of giving title a width and height we can set top, left, right, bottom property to 0 which actually scale the element to its relative parent's size. Hope this helps.
body{
margin:0;
padding:0;
}
.img-placeholder{
position:relative;
}
.img-placeholder img{
width:100vw;
height:auto;
}
.img-placeholder h2{
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
max-height:0px;
text-align:center;
}
<div class="img-placeholder">
<img src="http://lorempixel.com/output/sports-q-c-640-480-2.jpg">
<h2>Image Title</h2>
</div>

Particles.js as a background? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm trying to use this example as a background but I can't seem to get it to work.
http://vincentgarreau.com/particles.js/#nasa
In order to get around this I'm forced to use a margin top of -1500px just to place my text over the top of it and it's causing major issues with responsiveness.
Does anyone have any idea on how I can use it strictly as a background?
The creator of the plugin has done it here on his website.
http://vincentgarreau.com/en
You can tell because when you inspect it, there is no "canvas" hovering over the top as there is on the CodePen example.

I just managed to do this with the next css code, just as the creator does in his nasa page:
body,
html {
height: 100%
}
#particles-js canvas {
display: block;
vertical-align: bottom;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
-webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
transition: opacity .8s ease, transform 1.4s ease
}
#particles-js {
width: 100%;
height: 100%;
position: fixed;
z-index: -10;
top: 0;
left: 0
}
Then I wrote <div id="particles-js"></div> just after the body opening tag. Note that you can't see the canvas class because it's being generated by the particles.js library.
Canvas creation code fragment

I've ran into this problem before and fixed it by doing this:
/* to show the canvas bounds and remove scrollbars caused by it, if applicable */
canvas {
display:block;
background: rgb(33,36,50);
position: fixed;
z-index: -1;
}
then create a div/main element for your content and add this to it:
mainElementNameHere {
position: absolute;
}

Try to use the overflow: hidden; property at the element that you want to put in front of the particles.js;
#main-section {
overflow: hidden;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
opacity: 0.48;
}

Try this:
#particle_background canvas{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
}
where your body has id="particle_background"

I've been looking for the same. Now I'll be the first to say I probably didn't do something right following the instruction up here, but I found this and it works perfectly for me.
See this pen by Michael Van Den Berg
#particles-js {
width: 100%;
height: 100%;
background-color: #437993;
/*background-image: url('');*/
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
}
canvas {
display: block;
vertical-align: bottom;
}
<body>
<div id="particles-js"></div>
<div> #*Content you want to be in front goes here*# </div>
<body>

If your using particle js for wordpress website and following this link :
http://cakewp.com/divi-tutorials/add-nice-moving-particles-background-effect/
Then, you may notice that the moving particle are above your content, in that case just give the content (it could be a column/row, or Button, or input field) a “z-index: 5(or more)”
In this picture, the search bar wasn't working. So, I gave
"z-index: 5"
to it. Now it works fine. Also, the particles are responding well.

You also can implement it like this
<body id="particles-js">
<div class="something">
<h1> something here </h1>
</div>
</body>
in css
.something {
z-index:1;
}
all the element of particle-js placed at the background.
hope useful.

In id="particles-js" just add this code to your css:
position: fixed !important;
display: block;
You can add !important to override the previous styles.

center a div (absolute position and width)

i use below css to center my div with absolute position:
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width: 121px;
height: 121px;
margin-top: -60.5px; /*set to a negative number 1/2 of your height*/
margin-left: -60.5px; /*set to a negative number 1/2 of your width*/
}
It works like magic.
But as you can notice, it has fixed width and height.
Now i have to use this same css but for my div which has no fixed width and height, as it uses responsive layouts.
I just want to know is there any simplest way to set my div width dynamically in css by javascript or so? i.e., it count my div width on page load and than set to a negative number 1/2 of your it in margin-left?

You can center a fixed or absolute positioned element setting right and left to 0, and then margin-left & margin-right to auto as if you were centering a static positioned element.
#example {
position: absolute;
/* center the element */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
/* give it dimensions */
min-height: 10em;
width: 90%;
}
See this example working on this fiddle.

use to
display table-cell
as like this
Css
.parent{
display:table-cell;
width:400px;
text-align:center;
border:solid 1px red;
vertical-align:middle;
height:400px;
}
.child{
display:inline-block;
background:green;
}
HTML
<div class="parent">
<div class="child">i m child div</div>
</div>
Demo

I also had this problem trying to center captions of varying lengths in a slideshow.
To center an absolute positioned element that has a dynamic width you can use transform: translateX. With prefixes this works in most modern browsers. Like so:
div {
width: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%); }

Assign a class to all the divs that you want positioned like that, and then just select all of them and do the calculations.
$("body").find(".center").each(function() {
$(this).css({
"margin-left": "-" + ( $(this).width()/2 ) + "px",
"margin-top": "-" + ( $(this).height()/2 ) + "px"
});
});
Though, beware that this is a bad way of doing things, mainly because it's slow, your containers are not flexible and if you don't wait for the centering you may have flashes of unformatted content.