为什么同样的CSS在移动Safari上有不同的结果？ 和 ?

Question

今天，我正在测试我为我的一个网站所做的一个改变。CSS是一样的，在桌面Safari、Firefox和Chrome上看起来一切正常。然而，在手机Safari上，我的两个页面，其中一个使用了 <img> 而另一个则使用 <object> 呈现出巨大的不同，与 <img> 一个是如期呈现，一个是 <object> 尽管应用了相同的CSS，但还是以一种不可预见的方式拉伸了页面。

我把截图和HTML附在下面。在这两种情况下，我都使用了Xcode Simulator，因为它更容易让图片上传。请原谅边上的黑色文物。

---

<img> 版本。请忽略Xcode Simulator在渲染PNG时的可怕尝试--它无法正确渲染图像的事实与这个问题所面临的问题无关。

<div class="mapdiv">
    <a href="maps/Houston.pdf"><img src="maps/Houston.png" alt="Houston"></a>
</div>

活。http:/metrorouteatlas.netcitiesnorth_americahouston.html。 (注意：本页面可能随时发生变化，页面的当前状态可能与当前问题无关)

---

<object> 版本。

<div class="mapdiv">
    <a href="maps/002.pdf"><object class="mapobject" type="image/svg+xml" data="maps/002.svg"></object></a>
</div>

活。http:/metrorouteatlas.netopenttd002bennpool.html。 (注意：本页面可能随时发生变化，页面的当前状态可能与当前问题无关)

---

这是CSS。

.mapdiv, .mapdiv-lrg {
    text-align: center;
}

.mapdiv img {
    width: 75%;
}

.mapdiv-lrg img { /* Double width maps */
    width: 100%;
}

.mapobject {
    width: 75%;
}

.mapobject-lrg { /* Double width maps */
    width: 100%;
}

@media (max-width: 800px) {
    .mapdiv img {
        width: 100%;
    }
    .mapobject {
        width: 100%;
    }
}

从两张图片可以看出，后者似乎拉伸了页面上其他所有内容的宽度，未能按照媒体查询中指定的100%宽度应用。图片是3200x3200的PNG，而对象则是1600x1600的SVG，并有以下功能 viewBox="0 0 1600 1600" preserveAspectRatio="xMidYMin meet".

我很好奇，为什么 <object> 的版本，以及我如何纠正它。任何的见解将被感激。