Question

在iPhone 6s上的Safari上以纵向浏览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纵向浏览器的宽度 -然后将body max-width设置为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％，以免页面被炸掉。

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

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

1 个答案: