Position a div inside a smartphone image

Question

I'm trying to create a slideshow embedded inside a smartphone image for my website. Creating the slideshow is pretty easy using Owl Carousel. What i'm unable to do is placing my div inside the phone image so that it covers all the screen, even when the image has different sizes.

I started by measuring the margins that I had to apply in percents, but I don't like this solution.

Is there a way to manually set the four corners of the div relatively to the image ?

I can use jQuery

Please take a look at this site, hope it helps. http://www.eastros.com/frame-carousel/samples/index.html — RiesvGeffen, May 29 '17 at 14:27
I think the best solution is to wrap the img and slider within a outter-div and use absolute position for the slider and margins (left, right, top and bottom since it's absolutely positioned) with persentages will do the trick — Lasithds, May 29 '17 at 14:34
I was trying to avoid the percentage approach as it didn't seem clean to me, but looks like it's the only way — Shrolox, May 29 '17 at 14:48

Nadir Laskar · Answer 1 · 2017-05-29T16:19:32.280

Checkout the SNIPPET below.

$('.owl-carousel').owlCarousel({
    center: true,
    items:1,
    loop:true,
    margin:0
});

.screen .item{
  background-color:#5fba7d;
}

.phone{
    background-image: url(https://i.stack.imgur.com/vKQ2K.png);
    width: 320px !important;
    height: 650px;
    background-position: -25px 0;
}

.no-js .owl-carousel, .owl-carousel.owl-loaded {
    position: relative;
    top: 48px;
    width: 278px;
    left: 20px;
    height: 100%;
}

.owl-stage-outer, .owl-item, .item{
  height:100%;
}

.owl-stage{
  height:calc(100% - 153px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet" />

<div class="phone">
<div class="owl-carousel owl-theme screen">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
</div>
<div>

Position a div inside a smartphone image

1 Answers1

Linked