Web ページに地図の画像があります。CSS を使用すると、マップ イメージはブラウザーによって自動的にトリミングされます。目標は、マップが常に 100% の縮尺で、問題の場所が中心になるようにすることです。マップは常にページの幅いっぱいに表示されますが、ブラウザー ウィンドウのサイズが縮小されると、周囲の領域は単純にトリミングされますが、位置ピンは常に表示され、常に 100% の縮尺で表示されます。
divを使用して非網膜画像でこれをうまく機能させました：
#map {
width: 100%;
height: 300px;
background-image: url('images/map_1.jpg');
background-position: center;
background-size: auto;
}
Retina デバイスで私が抱えている問題は、それが「真」の 100% (つまり 2 倍の大きさ) であり、トリミングされている ( を使用background-size: auto;)、または全幅 ( を使用background-size: 100%;) のいずれかであることです。これは、マップ フィーチャがしばしば小さいことを意味します。 .
hiDPI デバイスを検出するためのメディア クエリがありますが、適切なスケールを維持し、オーバーフローをトリミング/非表示にする方法がわかりません。
ありがとう