画像が応答しない（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（画像が縦に積み重なる場合）に設定されていますが、画像の幅は425pxです。 1つの解決方法は、より大きな画像をアップロードすることです。または、CMSが画像のサイズを変更している可能性があります。このような場合は、より大きな画像を保存するようにCMSを設定する必要があります。この問題を解決できる間に、画像が伸びて画素化されます。

2. イメージ（またはその親ではなく）が全幅に伸びないようにするCSSがあります。あなたのcustom.cssファイルの末尾に次の行を追加します。これは何をしているのです

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

？ @mediaは、画面の幅が960ピクセル未満の場合にのみCSSを適用します。 custom.cssに以前設定されたいくつかのCSSを元に戻して、画像の親コンテナが全幅になるようにしてから、画像の周りにaというタグを付けて全幅にし、画像を全幅にすることができます。

Answer 2

： .imagemenu-item-large a{width: auto;}

思い出してくれるメディアクエリにこれを追加します。

Answer 3

あなたはこれを持っている。なぜならblock要素のhrefの大きさに埋めるために画像を引き起こしている

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

。あなたが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; 
    } 
}