「position: absolute」を使用した時、画像がうまくサイズ調整できません

以下のようなレイアウトにしたいのですが、どうしてもうまくいきません。

コードは以下の通りです

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>練習用</title>
7    <link rel="stylesheet" href="/css/style.css">
8</head>
9<body>
10    <div class="container">
11        <div class="main_box">
12            <div class="txt_box">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
13            <div class="img_box">
14                <img src="/img/600x400.jpg" alt="#">
15            </div>
16        </div>
17    </div>
18</body>
19</html>

CSS
1@charset "UTF-8";
2
3* {
4    padding: 0;
5    margin: 0;
6    box-sizing: border-box;
7}
8
9.container {
10    max-width: 1280px;
11    height: 10000px;
12    margin: 3vw auto;
13}
14
15.main_box {
16width: 80%;
17background-color: #efefef;
18padding: 3%;
19position: relative;
20}
21
22
23.txt_box {
24    width: 95%;
25}
26
27.img_box {
28    position: absolute;
29    top: 25%;
30    right: -25%;
31}
32
33.img {
34    display: block;
35    height: 50%;
36}

上記のコードで以下のように表示されます。

私の考えとしては、
メインボックス内にテキストボックスとイメージボックスを作り、高さ50%のイメージボックスをpositonプロパティでtopから25%で位置調整し、メインボックスの右辺でちょうど真ん中になる、
このことを考えて作成したのですが、うまくいきませんでした。

お手数ですが、ご回答いただけると嬉しいです。宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

CSSの.imgは、imgの間違いでしょうか。

いずれにしろ、img要素のheightは100%にして、
その親の.img_boxのheightを50%にしてみたらどうですか?

css
1.img_box {
2    position: absolute;
3    top: 25%;
4    right: -25%;
5    height: 50%;
6}
7
8img {
9    display: block;
10    height: 100%;
11}

これで、垂直方向については要件通りな気がします。

水平方向の要件は良く分かりませんので、別途調整が必要ですね。

投稿2020/11/27 15:41

gpsoft

総合スコア1323

saitama-742

2020/11/28 08:53

ご丁寧に、かつ迅速にご回答いただきありがとうございました。「img_box」の高さの指定と「.img」から「img」への変更をしたところ、思い通りに表示することができました。本当に訳がわからなくなっていただので助かりました。この度はご回答いただきありがとうございました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

「position: absolute」を使用した時、画像がうまくサイズ調整できません

関連した質問