0

I'm creating a really basic webpage editor where you can create "slides" which then can later be displayed somewhere else.

So in order to do that i've created the following page:

my current page

The left side is the preview and the right side is the editor where you can set certain properties of a paragraph. Basically both are 

float: left;
height: 100%;
width: 50%;
padding: 2%;

Now i want the preview to always be in the ratio of 16:9 so it gives an accurate preview

This is my current code

<div class="leftItem">
    <div class="leftArrow"></div>
    <div class="preview">
        <!-- Here is the text that gets edited -->
    </div>
    <div class="rightArrow"></div>
</div>

.leftItem {
    height: 95%;
    width: 50%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview {
    display: block;
    width: 90%;
    height: 40vh;
    border-style: solid;
    border-width: 1px;
    -webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
    box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
}
41 72 6c
  • 1,600
  • 5
  • 19
  • 30
niehoelzz
  • 385
  • 5
  • 20

1 Answers1

1

You can do this by adding a padding bottom to a box inside the box you want to size. After that you will have to add content in a seperate child and position it absolute, as the new sized box will otherwise push all contents out. The important bit is this:

.preview:after {

  display: block;
  content: '';
  padding-bottom: calc(100% / 16 * 9);
  width: 100%;

}

It looks like this:

.preview:after {
  display: block;
  content: '';
  padding-bottom: calc(100% / 16 * 9);
  width: 100%;
}
.preview .content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}


.leftItem {
  height: 95%;
  width: 50%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview {
  position: relative;
  display: block;
  width: 90%;
  border-style: solid;
  border-width: 1px;
  -webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
}
<div class="leftItem">
    <div class="leftArrow"></div>
    <div class="preview">
        <div class="content">
        <!-- Here is the text that gets edited -->
        </div>
    </div>
    <div class="rightArrow"></div>
</div>
somethinghere
  • 16,311
  • 2
  • 28
  • 42
  • Thanks you really helped me :) Btw when i add a margin-top to a

    in the content div now, the percentages wont work, how do i fix that?

     – niehoelzz Sep 10 '19 at 10:25
  • @niehoelzz Percentages should work, but you should try and see if padding works or not - it might just be margin collapse thats causing this! – somethinghere Sep 10 '19 at 11:27
  • Oh okay got that to work. It was because margin and padding always compare to the width of a div... Also how do i scale the div to be always 16:9 when the height is 100% (Not like in my question the width) – niehoelzz Sep 10 '19 at 14:25
  • @niehoelzz I have not actually seen a way to do that apart from JS, to be honest. – somethinghere Sep 10 '19 at 15:06