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

  • T

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

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

    0 1 件の返信

  • @tanaka3200 さん
    横から失礼します。
    ＞スマホで見たときには画面に３枚載るくらいの大きさ
    という事ですので　横幅の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使う人は多分皆無だと思います。

    0