画像サイズを変更しても拡大された状態で表示される

  • 解決済 torabutta

    (@torabutta)


    8年、 1ヶ月前

    最近分からない事だらけで困っています。

    投稿記事で画像を貼りサイズを手動で四隅をいじり変更しました。ですが実際の記事を見ると拡大された状態で表示されます。用意した画像のサイズは関係なく記事いっぱいに同じサイズで貼られ、ぼやけた感じになります。大きい画像の場合は記事いっぱいまで縮小され同じサイズになりぼやけます。　本当にどのサイズの画像も同じサイズでぼやけた形になります。

    表示された画像を検証で調べるとimg{ width:100%} この値を変更するとサイズが変わる事が分かりましたが、全体の画像サイズが変わってしまって困っています。　純粋に四隅を変更してサイズを決めたいです。
    また画像を検証、htmlを見ると　width=”546″ height=”606″と手動で変更したサイズや元のサイズより大きい状態で設定されている事が分かります。

    画像のキャプションに何かしら文字を入れると画像のサイズを自由に選択できます。
    テーマはSparkingを使用しています。　もしかしてbootstrapが関わってくるのでしょうか？
    よろしくお願いします。

    • このトピックはtorabuttaが8年、 1ヶ月前に変更しました。
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • GoUps

    (@goups)

    8年、 1ヶ月前

    表示された画像を検証で調べるとimg{ width:100%} この値を変更するとサイズが変わる事が分かりましたが、全体の画像サイズが変わってしまって困っています。　

    このimg{width:100%}というのは、ご理解されている通り、「imgタグで埋め込まれている画像は『すべて』幅を、（imgを囲う親ブロック要素幅）100％にまで広げます」という意味です。

    今回の場合、投稿記事内の画像に関しては、この設定を使いたくないという事ですので、投稿記事を囲うclass名（例：class=”article”）を見つけて、style.cssの下の方に、
    .article img {width:auto;max-width:100%;height:auto;}
    と追加すれば、「articleクラスの中にあるimgタグで埋め込まれている画像の幅は、元の画像幅で表示させ、もし親ブロック要素よりも大きくなるようなら、親ブロック要素幅のサイズまで縮小します」という意味になります。

    トピック投稿者 torabutta

    (@torabutta)

    8年、 1ヶ月前

    ありがとうございます！！。　無事解決する事が出来ました。　
    ずっと悩んでいたので解決する事が出来て嬉しいです。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「画像サイズを変更しても拡大された状態で表示される」には新たに返信することはできません。