HTML Resize Div with Javascript

Question

I am working on an online presentation editor.

I have a div (which should be the slide - the format is 16x9)

If the user decides to export it as pdf, the div should resize to 1920x1080, and then it should be exported (so that the pdf is not the same size as the user window, but always 1920 x 10800. My problem is, that if I set the width in JS like this:

$('#content').css('min-width', `1920px`);
$('#content').css('min-height', `1080px`);

$('#content').css('width', `1920px`);
$('#content').css('height', `1080px`);

only the container resizes, but the content doesn't.

This is what the slide looks like in the app

This is what the exported pdf looks like because the content doesn't resize.

If you have any idea, please let me know.

HTML:

<div style="background-color: green" id="content">
   <h1 style="color: black">Hallo Welt</h1>
   <p>Hallo 3CHIF!</p>
</div>

why do it so comlicated and fixed pixel height and width instead of using 100vw/100vh to adjust to what ever screen is used. Then use a print query to adjust the design specifically for printing. — tacoshy
– tacoshy, Commented Nov 11, 2020 at 18:40
Well, i am resizing it so that's no problem. I was using pixels to calculate the size for the pdf (it only takes pixels as the size) — SkisprungGott
– SkisprungGott, Commented Nov 11, 2020 at 18:51

Calvin Nunes · Accepted Answer · 2020-11-11 18:39:53Z

1

Well, maybe there's other solutions (or even better solutions), but I tought about scale(), this will scale the div and consequently, it's contents.

So, how I did it:

I estipulated the desired width and height (in your case, 1920x1080), then I got the div current size.
Divided the desired sizes by current sizes to get the "ratio", then used the CSS transform to set the new scale(x, y), as you can see in the below example.

You can base yourself in the code to get your solution

var desiredWid = 1920;
var desiredHei = 1080;

var theDiv = $("#content");
var currentWid = theDiv.width();
var currentHei = theDiv.height();

var ratioW = desiredWid / currentWid;
var ratioH = desiredHei / currentHei;

theDiv.css("transform","scale(" + ratioW + "," + ratioH + ")")

var currentSizes = theDiv[0].getBoundingClientRect();
console.log("Adjusted Size:", currentSizes.width + " x " + currentSizes.height)

#content {
  width: 2500px;
  height: 1200px;
  background: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">Original Size: 2500x1200</div>

I used jQuery since I saw you are using, but you can do it with pure JS also.

answered Nov 11, 2020 at 18:39

Calvin Nunes

6,4915 gold badges24 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SkisprungGott Over a year ago

Thank you so much! I never thought of using "scale". It's working great.

noshad b.e · Accepted Answer · 2020-11-11 18:33:09Z

0

try

#content{
    width:100%;
    height:100%;
}

if you want to have initiate max with or height you can add it to css too then see if .css work or not or must I say then use js

answered Nov 11, 2020 at 18:33

noshad b.e

12412 bronze badges

2 Comments

SkisprungGott Over a year ago

I don't think CSS works right there because I am trying to change the height & width just for the export. As I said the width and height of the container changes but the content doesnt.

noshad b.e Over a year ago

you can add width height 100% in js too Look max-width or max-height means whatever the width or height is as long as it is under that certain value it ok it does not have any effect on the with beneath the value so you must determine the width(or height) of the div

Collectives™ on Stack Overflow

HTML Resize Div with Javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related