画像をブラウザのサイズ関わらず両端まで表示させたい

画面が可変しても両端まで表示させるにはどうしたらいいのでしょうか？
今は画像サイズをしていしていますが、どう設定を変更すればいいかわからない状況です。
ご助言お願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="description" content="">
6<link href="css/reset.css" rel="stylesheet" type="text/css" madia="screen">
7<link href="css/style.css" rel="stylesheet" type="text/css" madia="screen">
8<link href="css/topindex.css" rel="stylesheet" type="text/css" madia="screen">
9<link rel="shortcut icon" href="/favicon.ico">
10<meta name="viewport" content="width=device-width,initial-scale=1.0">
11<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
12<title>*******************************************</title>
13</head>
14<body>
15	<div class="wrapper01">
16	<header>
17		<!-- header-->
18		<div class="headline">
19		<a href="./"><img src="images/rogo.svg" alt="コーポレートマーク"></a>
20		<p class="syamei">Nawate Trading Inc.</p>
21		</div>
22		</head>
23<body>
24	<div class="wrapper01">
25	<header>
26		<!-- header-->
27		<div class="headline">
28		<a href="./"><img src="images/rogo.svg" alt="コーポレートマーク"></a>
29		<p class="syamei">***********</p>
30		</div>
31		<nav class="main-nav">
32		<ul class="nav-list">
33			<li class="top-nav"><a href="./">*********</a></li>
34			<li class="top-nav"><a href="#">********</a>
35				<ul>
36					<li><a href="#">******</a></li>
37					<li><a href="#">*****</a></li>
38					<li><a href="#"></a></li>
39				</ul>
40			</li>
41			<li class="top-nav"><a href="******************************">お問い合わせ</a></li>
42			<li class="top-nav"><a href="*****************/./">よくある質問</a></li>
43			<li class="top-nav"><a href="***************/./">採用</a></li>
44		</ul>
45	</nav>
46	</header>
47		<!-- /header -->
48<main>
49
50<div class="topimages">
51<img src="images/top.jpg" alt="top画">
52<p>****************************************</p>
53</div>
54</main>
55</div>
56</body>
57</html>

CSS
1.topimages{
2	position: relative;/*相対配置*/
3}
4.topimages p{
5	position: absolute;/*絶対配置*/
6	color: white;/*文字は白に*/
7	font-weight: bold; /*太字に*/
8	font-size: 1.8em;/*サイズ2倍*/
9	top: 45%;
10	left: 4.5%;
11}
12.topimages img{
13	width: 1200px;
14	height: 400px;
15}
16.wrapper01{
17	width: 100%;
18	min-height: calc(100% - 50px);
19}

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

回答1件

ベストアンサー

.topimages imgの
width: 1200px;→width:100%;
に変更してみてはいかがでしょうか？
width:100%;とはセレクタで指定したタグの（今回は<img>）横幅を100%にすると言う意味なので、画面の横幅を変えたら伸縮すると思います。対してwidth: 1200px;は画面の横幅に関わらず常に1200pxで表示するという意味です。

投稿2021/03/14 14:57