Почему мои изображения не реагируют (на iPhone?)

Question

Я использую тему Maya, но по каким-то причинам мои изображения не реагируют на домашнюю страницу, когда я использую ее на телефоне. Может ли кто-нибудь рассказать мне, почему они отображают полный размер?

http://www.brycemckenzie.co.uk

Благодаря

<div class="borderpattern" style="margin-top: 20px;"></div> 
<h3 style="text-align: center; padding-top: 30px; padding-bottom: 25px;">Bryce McKenzie: Interior Design Edinburgh provides a comprehensive design and project management service for residential and commercial projects.</h3> 
<div class="borderpattern" style="margin-top: 15px; margin-bottom: 25px;"></div> 
<div id="imagemenu"> 
<div class="imagemenu-item-large"><a href="bryce-mckenzie-upholstered-furniture"><img class="wp-image-103 alignleft" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/productsandservices.jpg" alt="Products And Services" width="100%" height="auto"/></a></div> 
<div class="imagemenu-item-large"><a href="drapery"><img class="alignright wp-image-102" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/portfolio4.jpg" alt="Portfolio" width="100%" height="auto"/></a></div> 
<div class="clear" style="height: 30px;"></div> 
<div class="imagemenu-item-small"><a href="about/showroom"><img class="size-full wp-image-103 alignleft" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/aboutus1.jpg" alt="About Us"/></a></div> 
<div class="imagemenu-item-small"><a href="featured-artists/alison-rollo-sculptor"><img class="size-full wp-image-103 alignleft" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/featuredartists.jpg" alt="Featured Artists"/></a></div> 
<div class="imagemenu-item-small"><a href="press"><img class="size-full wp-image-103 alignleft" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/press.jpg" alt="Press"/></a></div> 
<div class="imagemenu-item-small"><a href="contact"><img class="size-full wp-image-103 alignleft" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/contactus.jpg" alt="Contact Us" /></a></div> 
</div> 

Answer 1

Несколько вопросов:

1. Оригинальный размер изображений не является достаточно большим. Ваш сайт имеет точку останова, установленную в 960px (при вертикальном стеке изображений), но изображения имеют ширину всего 425 пикселей. Одним из решений является загрузка больших изображений. Или, возможно, CMS изменяет размеры изображений. Если это так, вам нужно настроить CMS для сохранения больших изображений. Хотя мы можем исправить эту проблему, изображения будут растянуты и станут неровными.

2. Существует некоторый CSS, препятствующий тому, чтобы изображение (или его родительское место) расширялось до полной ширины. Добавьте следующие строки в конец файла custom.css:

   @media screen and (max-width: 960px) { 
       .imagemenu-item-large { 
       float: none; 
       } 
   
       .imagemenu-item-large a { 
       width: 100%; 
       } 
   } 
   

Что это делает? @media применяет CSS только тогда, когда размер экрана меньше 960 пикселей. Затем мы отменяем некоторый CSS, установленный ранее в custom.css, чтобы позволить родительскому контейнеру изображения перейти на полную ширину, а затем тег a вокруг изображения, чтобы перейти на полную ширину, позволяя изображению пройти полную ширину.

Answer 2

я мог бы исправить это для вас, делая это: .imagemenu-item-large a{width: auto;}

Remeber, чтобы добавить это запрос СМИ.

Answer 3

У вас есть это:

.imagemenu-item-large a { 
    display: block; 
    width: 425px; 
    height: 299px; 
} 

Что вызывает изображение, чтобы заполнить до размера href из-за block элемента. Если удалить display: block, а затем добавить что-то вроде этого к вашим изображениям:

.yourimageclass { 
    width: 100%; 
    height: auto; 
    display: block; 
} 

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

Answer 4

Изображения фиксированной ширины. Попробуйте это:

@media and (max-width: 767px) { 
    .imagemenu-item-large { 
    width: 324px; 
    float: none; 
    margin: 0; 
    } 
}