时间戳

首页 > 解决方案 > 如果在移动设备中，则制作图像以全高放大

javascript - 如果在移动设备中，则制作图像以全高放大

问题描述

我正在编写一个交互式地图，其中一些位置有标记。该地图由图像和通过 SCSS 的标记组成。

我希望地图图像，如果在移动设备上打开网页，会使用页面的整个高度放大，同时，我希望仍然能够左右滚动以查看整个地图。

我的实际代码可以在下面找到。我尝试添加heigh:100vh，但它拉伸了图像。

下面你也可以看到我的实际情况和我想要得到的（白框是移动设备屏幕的实际尺寸）

我有的

我需要的

我的代码

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/tippy.js@1.1.3/dist/tippy.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://unpkg.com/tippy.js@1.1.3/dist/tippy.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="container">
    <div class="map-container">
      <img style=filter:brightness(1.5); src="NorthAmericaMap.png">
      <div class="point miami tippy" title="Miami - FTX Arena"></div>
    </div>
  </div>
</body>
</html>

CSS ----------

html, body {
  height: 100%;
}
body {
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}


$primary: #161616;

.map-container {
  /*padding: 3.2rem .8rem;*/
  position: relative;
  display: inline-block;
  img {
    width: 100%;
  }
  .point {
    cursor: pointer;
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    background-color:  $primary;
    border-radius: 50%;
    transition: all .3s ease;
    will-change: transform, box-shadow;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 rgba($primary, 0.4);
    animation: pulse 3s infinite;
    &:hover {
      animation: none;
      transform:  translate(-50%, -50%) scale3D(1.35, 1.35 ,1);
      box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }
  }
  .venezuela { top: 54%; left: 24%; }
  .brasil { top: 64%; left: 28%; }
  .argentina { top: 77%; left: 27%; }
  .colombia { top: 55%; left: 21%; }
  .panama { top: 51%; left: 18%; }
  .mexico { top: 38%; left: 12%; }
  .usa { top: 26%; left: 17%; }
  .arabia { top: 40%; left: 53%; }
  .turquia { top: 31%; left: 57%; }
  .rusia { top: 16%; left: 67%; }
  .china { top: 40%; left: 72%; }
  .japon { top: 34%; left: 86%; }
  .miami { top: 63%; left: 65%; }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba($primary, 0.5); }
  70% { box-shadow: 0 0 0 25px rgba($primary, 0); }
  100% { box-shadow: 0 0 0 0 rgba($primary, 0); }
}

JS -------------

$(document).ready(function(){
    tippy('.tippy', {
      theme: 'light',
      size: 'big',
      arrow: true
    })
});

标签： javascripthtmlcsssass

解决方案

推荐阅读