背景画像を縦横比を固定して画面一杯に全体を表示する

CSSを使ってbackground-imageに指定した画像の縦横比を固定して余白をつくらず全体を表示したいです。

↓現在のコード
.wrap-topに背景画像を指定しています
使用している画像のサイズは1545px×1475pxです。

html
1<div class="wrap_top">
2 　<ul>
3   　<li><a href="">◯◯◯</a></li>
4   　<li><a href="">◯◯◯</a></li>
5   　<li><a href="">◯◯◯</a></li>
6   　<li><a href="">◯◯◯</a></li>
7   </ul>
8</div>

CSS
1.wrap_top{
2    width: 100%;
3    height: 1000px;
4    background-image: url(./img/01.png); 
5    background-size: contain; 
6    background-position: center;
7    background-repeat: no-repeat; 
8}

heightをどうして良いのか分からないので今適当に指定しています。
現在のコードで全体は表示できるのですが、画面サイズが小さい時(ex.幅375pxなどの時)に画像の上下にheight:1000pxを満たすような無駄な余白ができてしまいます。

理想としては画面の幅が一定の値以下の時はそれに合わせて高さをちょうどよく変化させたいです
例えば画面の横幅が1000px未満の時はheightを画面の横幅の95%に指定する、など

heightの値にwidth(画面の横幅)を変数とした関数を指定できれば...などと思ったのですがそれだとJSを使う必要があるのでしょうか？

JSを使っても構わないので何かしらの方法があればご教授ください。

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

回答3件

aspect-ratioがそのような働きをしますが、ブラウザ対応に難があります。
Chrome と新Edge には対応していますが、2021/5現在では Firefox と Safari は開発版でしか動作しません。
旧Edge と IE11 は、もちろん対応していません。

幅（あるいは高さ）のみだけを定義するだけで、もう一つの値はアスペクト比を使用して自動的に算出されます。

Chrome 88のここに注目！CSSのaspect-ratioプロパティでアスペクト比が簡単に、別窓はデフォルトでnoopenerに | コリス

投稿2021/05/26 01:57

編集2021/05/26 02:03

Lhankor_Mhy

総合スコア36158

疑似要素に padding-top を設定するテクがよく使われます。padding-topの100%は横幅が基準になるという性質を利用してます。

css
1.wrap_top{
2  width: 100%;
3  background-image: url(./img/01.png); 
4  background-size: contain; 
5  background-position: center;
6  background-repeat: no-repeat;
7  position: relative:
8}
9.wrap_top:before {
10  content:"";
11  display: block;
12  padding-top: 95%; 
13}
14.wrap_top > ul {
15  position: absolute;
16  top: 0;
17  left: 0;
18  bottom: 0;
19  right: 0;
20}

CodePenサンプル

投稿2021/05/24 12:54

編集2021/05/26 02:02

hatena19

総合スコア33790

background-size: cover; が便利です。
vw/vh で画面の横/縦幅を取得できます。

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<style>
5		body {
6			margin: 0;
7		}
8		.wrap_top {
9			overflow: hidden;
10			width: 100vw;
11			height: 95vw;
12			background-image: url(http://dummyimage.com/1545x1475/CCC/fff.png&text=1545x1475);
13			background-size: cover;
14			background-position: center center;
15		}
16		@media screen and (min-width:1001px) {
17			.wrap_top {
18				height: 100vh;
19			}
20		}
21		</style>
22	</head>
23
24	<body>
25		<div class="wrap_top">
26			<div>
27			<ul>
28				<li><a href="">◯◯◯</a></li>
29				<li><a href="">◯◯◯</a></li>
30				<li><a href="">◯◯◯</a></li>
31				<li><a href="">◯◯◯</a></li>
32			</ul>
33			</div>
34		</div>
35	</body>
36</html>