スマホ画像サイズについて



  • 記事にメディアから画像追加しております。スマホで見たときには画面に3枚載るくらいの大きさで、スマホでみたときの画像を大きくする方法を教えてください。
    大きさをいくら変えても自動処理されるのか、まったく変わりません。よろしくお願いいたします。


    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :



  • @tanaka3200 さん
    横から失礼します。
    >スマホで見たときには画面に3枚載るくらいの大きさ
    という事ですので 横幅の3倍にしてます。
    @media (max-width: 767px) {
    .cps-post .cps-post-thumb:not(.jin-thumb-original) img{
    height: calc(100vw * 3);
    width: 100%;
    }
    }
    ですが、やってみれば分かりますが 縦に3倍伸びます。
    見づらいし、本位でもないかと思うので
    >スマホでみたときの画像を大きくする方法
    も考えると
    @media (max-width: 767px) {
    .cps-post .cps-post-thumb:not(.jin-thumb-original) img{
    height: calc(100vw * 2);
     width: 100%;
     object-fit: cover;
    }
    } 
    がいいかもしれません。 2
    のところの2.1 3 等と変えると 縦に伸びてそれに合わせて画像も調整されます。
    記事に対して 訴求する目的で画像を大きくしたいと思いますので、下の方をお勧めします。
    入れるところは カスタマイズの追加CSSでいいと思います。

    ずっと使うのであれば、子テーマのstyle.cssに入れてください。
    追加で、object-position: 100% 100%;
    を入れて数字を変えると、中心点も変えれます。
    よろしくお願いいたします。

    ただ、これはIE とedge  マイクロソフトのブラウザーでは動きません。
    専用のjsを FTPで入れて ごにょごにょ記述しないと出力できません。

    スマホでIE使う人は多分皆無だと思います。


 

});