サポート

レスポンシブル対応サイトの画像について

FREO (2017/08/21 22:48)

設置URL : https://www.google.co.jp/

ダミーのURLで失礼します。

レスポンシブルサイトを作っているのですが、freoから挿入した画像のサイズを思い通りの大きさにすることができません。

画像の大きさは横480ピクセル・縦360ピクセルです。
表示するスクリーンによって画像の大きさが収縮します。

htmlは、
<div class="product_img">
 <img src="〇〇" />
</div>

cssは、
.product_img {
position: relative;
width: 40%;
max-width: 320px;
float: left;
}
.product_img img {
width: 100%;
}
になっています。

メディアから画像を挿入してみると縦長になってしまいます。
「メディアの設定」でどのように設定すれば希望通りの横4:縦3の比率で表示されるようになりますか。

宜しくお願い致します。

ミツ (2017/08/25 23:31)

URL : http://32877.xii.jp

こんにちは。
現状を見ておらず、また検証していないので確信はもてませんが、freoでメディアを挿入する際、imgタグにwidth及びheightが自動的に挿入されますが、そちらが影響しているのではないですか?
imgタグからwidth及びheightを削除して試してみて下さい。

また、[.product_img img]に

height: auto;

をつけてみてください。

FREO (2017/09/01 09:17)

URL : https://www.google.co.jp/

遅くなりまして申し訳ございません。

ありがとうございます!
できました!

これでサイトの制作が進みそうです。
ありがとうございました!

返信

  • この記事に返信します。
  • 返信の際は、設置URL以外の項目は入力必須です。
投稿フォーム
名前
設置URL
本文(本文の装飾について
編集キー(投稿した記事を編集する際に使用します。)
投稿キー(スパム対策に、投稿キー を半角で入力してください。)