将div放在智能手机图像中

Question

我正在尝试为我的网站创建嵌入智能手机图像内的幻灯片。 使用Owl Carousel创建幻灯片非常简单。 我无法做的是将我的div放在手机图像中，以便覆盖所有屏幕，即使图像尺寸不同。

我开始测量我必须应用百分比的边距，但我不喜欢这个解决方案。

有没有办法手动设置div的四个角相对于图像？

我可以使用jQuery

Answer 1

查看下面的 SNIPPET 。

＆＃13;

＆＃13;

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

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;