将div放在智能手机图像中

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

Answer 1

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>