在智能手机图像中放置一个 div答案

【问题标题】：Position a div inside a smartphone image在智能手机图像中放置一个 div
【发布时间】：2017-05-29 14:21:38
【问题描述】：

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

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

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

我可以使用 jQuery

【问题讨论】：

请看看这个网站，希望对您有所帮助。 eastros.com/frame-carousel/samples/index.html
我认为最好的解决方案是将 img 和滑块包装在一个外部 div 中，并使用绝对位置作为滑块和边距（左、右、顶部和底部，因为它是绝对定位的）与 persentages 将做这个把戏
我试图避免百分比方法，因为它对我来说似乎并不干净，但看起来这是唯一的方法

标签： javascript jquery html css

【解决方案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>

【讨论】：