画像をうまく配置できません

Question

###前提・実現したいこと
縦横比をそのままで画像を画面いっぱいに表示したいです![]
現状こんな感じなのですが!

実際には下のように配置したいです

containで指定するとこのように画像が小さくなってしまいます。

<header>
		<div class="header__wrap flex">
			<a href="">
				<div class="header__left">
					<div class="header__logo">
						<img src="img/logo.jpg">
					</div>
					</div>
			</a>	
			<nav class="nav">
				<ul class="nav__gNav flex">
					<li><a href="">menu</a></li>
					<li><a href="">news</a></li>
					<li><a href="">concept</a></li>
					<li><a href="">access</a></li>
					<li><a href="">contact</a></li>
				</ul>
			</nav>
		</div>
	</header>
	<div class="mainVisual">
		<div class="concept">
			<img src="img/concept_img1.png" class="cancept__img1">
			<img src="img/concept.png" class="cancept__img2">
			<img src="img/concept_img2.png" class="cancept__img3">
		</div>
	</div>

header {
	width: 100%;
    position: fixed;
    z-index: 10000;
    background-color: #fff;
}
.flex{
	display: flex;
}
.header__wrap {
	margin: 0 auto;
	padding: 15px 0;
	position: relative;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}
.nav__gNav li {
	margin: 0 10px;
	padding: 1px 4px;
	font-size: 2.7rem;
    color: #4d4d4d;
}
.mainVisual {
    background-image: url(../img/main.jpg);
    height: 100vh;
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 1

画面いっぱいに配置しているタグに、background-imageとして画像を指定してください。
.mainVisualクラスですかね？

.mainVisual{
 background-image : url(hoge.png);
 background-size : cover;
}

background-size : coverを指定しておけば、そのタグ全体をカバーするように縦横比を維持して画像が引き伸ばされます。
なにか違うなと感じたら、background-size : containも試してみてください。
どちらかが、希望に沿ったものになるでしょう。

Comments

[ryuji000]

どちらも試したのですがcoverにすると上のようにもじがはいらなくなってしまい、containで指定すると、画面いっぱいに映らなくなってしまいます

[zohnam]

文字は、img/concept_img1.pngなどですか？

[ryuji000]

文字は背景画像と一緒に作っています

[zohnam]

では、タグ自体の縦を伸ばせばいいというか、横からの比率を元にした数値にすればいいですね。
つまり、 height : 70vw;みたいに。
単位をvwにすれば、横との比率で適切な数字が出せるはずです。

[ryuji000]

試してみます

[ryuji000]

現状のheight : 100vwを70vwに変えればいいってことですよね?

[zohnam]

現状は heithg: 100vh;になってますよね。単位vhを、vwに変えてください。
そして、ちょうどいい大きさになるように、数字を増減してください。
具体的にいうと、画像の横幅との比率です。
横幅に対して、高さは何%ですか？
例えば縦900px横1200pxなら、横に対して高さ75%なので、height:75vw;です。

[ryuji000]

75vwの感じをもう少し小さくすることは可能ですか?

[zohnam]

全体的に小さくしたいのであれば、横といっしょに小さくするのが良いでしょうね。いま.mainVisualはwidth指定がありませんが、DIVタグはデフォルトで横幅いっぱいという扱いなので、100vwが指定されているのと同じ状況です。
width:80vw;
height:60vw;
のようにすれば、調整できます。

[ryuji000]

2番目の画像のような配置にしたいのですがその指定だとうまく行かなかったです

[zohnam]

何がうまく行かなかったんですか？

[ryuji000]

表示される画像が小さくなってしまって、画面いっぱいに映らないんです

[zohnam]

いや、小さくしたいんじゃなかったんですか？
まさかとは思いますが、「75vwの感じをもう少し小さくすることは可能ですか?」っていうのは、高さだけを縮めたいってことですか？
それはあなたが適当に小さな数字を入れてちょうどいい塩梅の数字を見つけ出せば良いことですよ。

[ryuji000]

わかりづらい説明で大変申し訳ございませんでした。