为什么我的图像在两个不同的页面上的大小不同？

Question

在iPhone 6s上观看此页面上的http://peteredesigns.com，在纵向方向上，顶部显示“Peter E Designs”的图像占据了大约75％的页面，因为它应该是，因为它的CSS是：

#wrapper #header a img {
width: 735px;
text-align: center;
}

但是，当我转到这个页面，http://peteredesigns.com/transformations-gallery/，具有相同的方向和浏览器时，img扩展为非常大。为什么会这样？我希望这张图片在每一页上保持相同的宽度。

我尝试过： - 将机身宽度设置为980px，这是browsersize.com所说的我的iPhone纵向浏览器宽度的宽度 - 然后我将机身最大宽度设置为980px，这样页面上的任何内容都不会导致页面扩大

body {
    font-size: 1em;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    width: 980px;
    max-width:980px;
    margin-left: auto;
    margin-right: auto;
}

我还将img宽度设置为735px，如上所示，因此它不会扩展。但在这两页之间确实如此。

谁能解释为什么图像会在这两个页面之间改变宽度？

我的预期结果是，我的img在每个页面上保持相同的宽度，同时在手机上查看。

Answer 1

看起来页面上的不同内容会破坏页面宽度并影响缩放。

进行以下更改，您应该没问题。我将所有内容设置为100％，但您可以根据需要更改这些百分比。

#wrapper #header a img {
    width: 100%; /*instead of 735px*/
}

#wrapper {
    width: 100%; /*instead of 75%*/
}

body {
    width: 100%; /* instead of 980px;*/
}

在主页上，您应该将class =“entry-content”img改为宽度为100％，这样页面就不会被炸掉。

您还可以在所有这些元素上设置像素最大宽度，以确保桌面查看没有更改。