How to attach a div to a particular dimension in html

Question

I am developing a kind of a visual emulator for an app.

Here is what I would like:

The above image is a iphone wireframe. I would like to insert a div or any other element within the bounds of the iphone screen.

I did search for iframe. However html5 does not support scrollview. So I was looking for a way to do it another way.

I am using bootstrap 3 and would like it to be responsive(FYI).

EDIT So I tried Soviut's answer:

This is part of my HTML:

<div id="page" class="row">
    <div id="iOS" class="col-md-6">
        <div id="iphone-wireframe" class="container">
            <div class="content">
                <h1>This is heading</h1>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
                <p>This is some content This is some content This is some content This is some content This is some
                    content This is some content This is some content This is some content.</p>
            </div>
        </div>
    </div>

I also tweaked the CSS to make it more responsive by using percentage etc and by mimicking img-responsive characteristics.

Part of my CSS:

.container {
    width: 65%;
    height: 90%;
    margin-top: 40px;

    background-image: url("/assets/res/img/iPhone-wireframe.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.content {
    margin: 81px auto auto;
    width: 67.5%;
    height: 75.5%;
    background: #FFF;
    overflow: auto;
}

Result is perfect for when it was tweaked. It is responsive as well, but the image and text are not responsive in sync. I don't know how to explain this in words so I'll just display by pictures:

When perfect:

When not so perfect:

Any sample code? what have you tried? We will not code this for you, if you attempted this, post your attempt — Adam Buchanan Smith, Sep 19 '16 at 22:37
I did mention that I thought of iframe and according to the w3schools doc it does not support scrolling in HTML 5. I am not asking anybody to give me the code for this, I am just asking for pointers or ideas in the right direction. If you did feel the other way, I'll edit my question. — poortechworker, Sep 19 '16 at 22:44
@AdamBuchananSmith: I have updated my question with an attempt with the help of Soviut's answer. — poortechworker, Sep 20 '16 at 04:19

score 1 · Accepted Answer · edited May 23 '17 at 11:47

You can set the image as the background for a container element and then add padding to it to push the content inwards until it fits within the bounds.

* {
  box-sizing: border-box;
}

.container {
  width: 500px;
  height: 800px;
  padding: 50px 100px;
  
  background: #CCC;
}

.content {
  height: 100%;
  background: #FFF;
  overflow: auto;
}

<div class="container">
  <div class="content">
    <h1>This is heading</h1>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
    <p>This is some content This is some content This is some content This is some content This is some content This is some content This is some content This is some content.</p>
  </div>
</div>

EDIT: to cope with the fact that your container element isn't maintaining an exact ratio, you need to use this CSS trick to do so.

The other option is to use an actual <img> tag (which scales by a ratio automatically as long as only a width is set). You can then style the container element to always fit the image.

I have updated my question, with some more question. I probably should mark this as the answer, however I would like to know your views on my edit. — poortechworker, Sep 20 '16 at 04:20
@GauravPandey the issue you're facing is that the image is not scaling the same as your percentage. What you need to do is make sure the DIV is always scaling at a ratio. You can use a div ratio css trick to do this, which I guess I can add to the answer. — Soviut, Sep 20 '16 at 05:13

How to attach a div to a particular dimension in html

1 Answers1