Почему мой размер img по-разному на двух разных страницах?

Question

При просмотре этой страницы http://peteredesigns.com в Safari на iPhone 6s в портретной ориентации изображение вверху с надписью «Peter E Designs» занимает около 75% страницы, как и предполагалось,так как его CSS:

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

Однако, когда я перехожу на эту страницу, http://peteredesigns.com/transformations-gallery/, с той же ориентацией и браузером, img увеличивается до очень большого размера.Почему это происходит?Я хотел бы, чтобы это изображение оставалось одинаковой ширины на каждой странице.

Я пытался: - установить ширину тела в 980 пикселей, что, как говорит 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%таким образом, страница не будет взорвана.

Вы также можете установить максимальную ширину пикселя для всех этих элементов, чтобы гарантировать, что просмотр рабочего стола не изменился.