No.1ベストアンサー
- 回答日時:
縦も同様です。
>リキッドデザインで横向き画像を配置する場合、CSSでwidth100%で指定すると自動的にheightを計算されますが、
通常は計算されないはずです!!
(HTMLがきちんと書かれていれば、width,height属性でサイズが指定されている(詳細度は0000))
スタイルシート側で、width:100%;height:100%;とあわせて指定する必要があります。
なお、画像は置換インライン要素なのでブロックにしたほうが良いでしょう。
<div class="section">
・・・
<div class="figure">
<p><img src="./images/7.jpg" width="240" height="320" alt="白くて美しいキノコ"></p>
<p class="figcaption">キノコの写真</p>
</div>
div.section{position:relative;}
div.section div.figure{width:20%;float:right:margin:5px;position:relative;}
div.section div.figure p{margin:0;text-align:center;}
div.section div.figure img{display:inline-block;width:90%;}
とか・・
・本文中(section)を内包ブロックの基準にする(relative)
・本文中の挿絵(figure)は、本文の幅の20%で右にfloatさせ、マージンは5px、内包ブロックの基準にする(relative)
・本文中の挿絵の画像はinline-blockにし幅は90%
というふうに指定します。高さを基準にする場合も同じです。
HTML5で書かれていれば
section{position:relative;}
section figure{width:20%;float:right:margin:5px;position:relative;text-align:center;}
section figure p{margin:0;text-align:center;}
section figure img{display:inline-block;width:90%;}
ですかね。
一方を指定して、他方をauto;
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- Visual Basic(VBA) 【VBA】写真の縦横比を変えずに貼り付ける 5 2023/06/13 11:42
- 数学 情報処理詳しい人!! A4縦のレポート文書に4:3の大きさの横向きの写真画像を貼り付けることにした。 2 2022/12/18 02:30
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
goo は、放置?
-
htmlの文字が縦書きになる
-
WEBページを強制的に横画面で見...
-
テーブルの行を折りたたみたい...
-
css初心者 フレックスボックス...
-
HTML電卓で1文字消す方法
-
HTMLですCSSです 画像のように...
-
テーブルタグのセルの幅の一部...
-
WEBサイト 画像の直接リンクに...
-
CSSについて教えてください。 ...
-
青い枠のみのHTML
-
HTMLです 店主のこだわりという...
-
HTMLです 四角みたいにして中に...
-
初心者html・CSS ウィンドウを...
-
12月のカレンダーを表すHTMLを...
-
pythonに自分で作ったHTMLを、...
-
HTMLです次の意味を持つ要素ま...
-
アコーディオンメニューが思う...
-
スマホ(android)のタッチパネ...
-
HTMLの CSSのファイルというの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
htmlで<form>~</form>を並べて...
-
WEBページを強制的に横画面で見...
-
コードを書いて下さい( ; ; )...
-
css初心者 フレックスボックス...
-
テーブルのセルデータを自動改...
-
CSSデータの作成方法について(...
-
HTMLで画像をポップアップで表...
-
メモ帳の段落の揃え方
-
スマホ(android)のタッチパネ...
-
HTMLで特定の文字だけ色を変え...
-
プログラミングの勉強が進みません
-
スマホでHTMLファイルを開いて...
-
テーブルタグのセルの幅の一部...
-
CSSでつくったメニューのアニメ...
-
大至急。webのシングルページを...
-
角丸画像の背景色を透明にした...
-
HTML入門でもう躓いてしまった。
-
HTMLの CSSのファイルというの...
おすすめ情報