Google Maps Satellite View Testing Page
Map Controls
Test 1: Object-Fit Cover (PDF Current Style)
This uses object-fit: cover which fills the container but may crop the image.
STATE LINE STATION
KANSAS CITY, MO
.satellite-img {
width: 243mm;
height: 130mm;
object-fit: cover;
}
<img class="satellite-img" src="..." alt="Satellite View">
Test 2: Object-Fit Contain
This uses object-fit: contain which maintains aspect ratio but may leave empty space.
STATE LINE STATION
KANSAS CITY, MO
.satellite-img {
width: 243mm;
height: 130mm;
object-fit: contain;
}
<img class="satellite-img" src="..." alt="Satellite View">
Test 3: Auto Height
This uses auto height to maintain the aspect ratio naturally.
STATE LINE STATION
KANSAS CITY, MO
.satellite-img {
max-width: 243mm;
height: auto;
}
<img class="satellite-img" src="..." alt="Satellite View">
Test 4: Centered with Inline-Block (Recommended)
This centers the image and maintains aspect ratio using inline-block.
STATE LINE STATION
KANSAS CITY, MO
.map-container {
width: 243mm;
text-align: center;
}
.satellite-img {
max-width: 243mm;
height: auto;
display: inline-block;
}
<div class="map-container">
<img class="satellite-img" src="..." alt="Satellite View">
</div>
Test 5: Fixed Aspect Ratio Container
This uses a container with a fixed aspect ratio (16:9) to ensure proper display.
STATE LINE STATION
KANSAS CITY, MO
.map-container {
width: 243mm;
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}
.satellite-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="map-container">
<img class="satellite-img" src="..." alt="Satellite View">
</div>