0
私は、左の列をスクロールして（画像をリンクとして）、固定フルスクリーンの右の列にGoogleマップを表示してレイアウトを作成しようとしています。地図が歪んで表示されている理由を理解できません。 Here's a screnshot of my problem.Google Maps Tiles Flexhookで歪んだ
$(window)
.resize(function() {
var h = $(window).height(),
offsetTop = 40; // Calculate the top offset
$("#map-canvas").css("height", h - offsetTop);
})
.resize();html {
height: 100%;
font-family: sans-serif;
padding: 0px;
margin: 0px;
}
body {
height: 100%;
overflow: hidden;
margin: 0px;
display: flex;
padding-left: 0px;
}
.column {
height: 100%;
display: flex;
flex-direction: column;
padding-left: 0px;
margin: 0px;
}
#left {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40%;
background-color: white;
padding: 0px;
margin: 0px;
}
#right {
background-color: #f3f3f3;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 60%;
flex: 1;
}
.top-left {
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.top-right {
display: inline-flex;
flex-shrink: 0;
background-color: #333;
color: white;
padding: 20px;
}
.bottom {
flex-grow: 1;
overflow-y: auto;
padding: 0px;
margin: 0px;
}
ul {
display: inline-flex;
list-style: none;
padding: 0px;
margin: 0px;
}
li {
display: flex;
padding: 0px;
margin: 0px;
}
img {
min-width: 450px;
width: 100%;
padding: 0px;
margin: 0px;
}
#map_canvas {
flex: 2;
}<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="left" class="column">
<div class="bottom">
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
<li><img class="img-responsive" src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" data-src="http://s3.india.com/travel/wp-content/uploads/2014/09/Mumbai-Gateway-625x470.jpg" style="opacity: 0.5;"></li>
</div>
</div>
<div id="right" class="column">
<div class="bottom">
<div id="map-canvas">
</div>
</div>
</div>
<script>
function initMap() {
// Styles a map in night mode.
var map = new google.maps.Map(document.getElementById("map-canvas"), {
center: {
lat: 40.674,
lng: -73.945
},
zoom: 12
});
}
</script>
<!-- script references -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAK1QRzq4tKEN63PxIA6jKfyypkoRn326M&callback=initMap" async defer></script>
</body>Here's my codepen link、それは便利です場合。
thisのように見えますが、正確に何が間違っているのか分かりませんでした。
アイデア？初心者を手伝ってくれてありがとう！
ありがとうございました！ –