將div放在智能手機圖像中

Question

我正在嘗試為我的網站創建一個嵌入智能手機圖像內的幻燈片。 使用Owl Carousel創建幻燈片非常簡單。 我無法做的是將我的div放在手機圖像中，以便它覆蓋所有屏幕，即使圖像大小不同。

我開始測量我必須應用百分比的邊距，但我不喜歡這個解決方案。

有沒有辦法手動設置div的四個角相對於圖像？

我可以使用jQuery

Answer 1

查看下面的SNIPPET 。

 $('.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>