２つの画像を重ねたあと、画像を固定してレスポンシブ化したいです。

前提・実現したいこと

はじめまして。私は今プログラミングの練習中であるサイトの模写コーディングをしているのですが、
画像の配置について悩んでいます。

上の図のように『main-text.png』の右端に『main-person.png』をかぶせ、
画像を固定しレスポンシブ化したいです。

HTML

CSS

.main_img {

position: relative;

}

.main_img img{

width: 100%;
height: 300px;
object-fit: cover;

}

img.pict {

width: 226px;
height: 475px;
position: absolute;

top: 10px;
right: 10px;

}

試したこと

当サイトで似たような質問の回答をもとに、自分なりに書いてみたのですが
なかなか思い通りにいきません。
お力添えよろしくお願いいたします。

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

回答1件

ベストアンサー

模写元がどうなっているかで、コーディング方法は変わって来ます。

上の図のように『main-text.png』の右端に『main-person.png』をかぶせ、
画像を固定しレスポンシブ化したいです。

下記コードで↑は実現できてはいます。
ただ、模写元が不明なのでそのままでは使えないはずです。
media queryやcssで調整したりする必要があるかと思います。

あと画像を用意するのが面倒だったので、background-colorにしてます。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        section {
10            width: 70vw;
11            height: 43vw;
12            position: relative;
13            margin: 0 auto;
14            max-width: 700px;
15            max-height: 430px;
16            min-width: 300px;
17            min-height: 184px;
18        }
19
20
21        section p {
22            width: 85%;
23            height: 82%;
24            background-color: rgb(255, 127, 39);
25            position: absolute;
26            top: 0;
27            right: 0;
28            bottom: 0;
29            left: 0;
30            margin: auto;
31        }
32
33        .img {
34            position: absolute;
35            width: 20vw;
36            height: 43vw;
37            display: block;
38            background-color: rgb(239, 228, 176);
39            top: 0;
40            right: 0;
41            border-radius: 50%;
42            max-width: 200px;
43            max-height: 430px;
44            min-width: 85px;
45            min-height: 184px;
46        }
47    </style>
48</head>
49
50<body>
51    <section>
52        <p></p>
53        <img src="" alt="" class="img">
54    </section>
55</body>
56
57</html>