レスポンシブで画像を比率を変えずに画面幅いっぱいに縮小させたい。

前提・実現したいこと

background-imageで指定した画像をレスポンシブ対応で画面が小さくなっても
画像を比率を変えずに縮小させたいが背景画像の上に乗っかっている文字が縦横中央に寄ってくれない。

画像のサイズは横１１００px　縦169pxです。

padding-topを％で指定して高さを調節してみたり、background-sizeをcoverにしてみたりもしたんですが、
画面からはみ出してしまいます。

エラーメッセージ

HTML

<section id="container"> <article class="open_text"> <p>元気１００倍アンパンマンを好きになろう！！</p> </article> </section ### 該当のソースコード CSS ```ここに言語を入力 .open_text p { font-size:18px; font-weight:bold; }

.open_text {
background-image:url("http://www.test.png");
background-repeat:no-repeat;
background-size: cover;
width: 100%;
padding-top:9.36%;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
align-items: center;
text-align:center;

### 試したこと
```ここに言語を入力
	.open_text p {
		font-size:18px;
		font-weight:bold;
		position: absolute;
  top: 30%;
  width: 100%;
	}
	
.open_text {
		background-image:url("background-image:url("http://www.test.png");
	background-size: cover;
  width: 35%;
  padding-top: 20%;
  position: relative;
  top: 0;
  left: 0;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
  		display: flex;
  		justify-content: center;
  		align-items: center;
	text-align:center;
		
	}

このように変えてみましたが背景画像が左によってしまってたのと背景画像の一部しか表示されず文字もその表示された一部に寄って表示されてしまいました。

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

回答1件

ベストアンサー

backgroundで配置する場合、要素の縦横比を画像の縦横比と一致させねばならず少し大変です。

HTML
1<div class="open_text">
2    <p>
3        元気１００倍アンパンマンを好きになろう！！
4    </p>
5</div>

CSS
1.open_text{
2    width: 100%;
3    background: url("https://placehold.jp/1100x169.png");
4    background-size: cover;
5    padding-top: 15.4%;/* この数値で要素の縦横比を調整 */
6
7    position: relative;
8}
9
10.open_text p{
11    font-size:18px;
12    font-weight:bold;
13
14    position: absolute;
15    top: 0;
16    left: 0;
17    right: 0;
18    bottom: 0;
19
20    display: flex;
21    align-items: center;
22    justify-content: center;
23    text-align: center;
24}

padding-topの数値は、
https://tools.m-bsys.com/calculators/ratio.php
の「1:x」のxの数値を使ってみました。

もしHTML側を変更することが可能なのであれば、
画像はimg要素としてHTML側に書くほうが、考えることは少なくて済むように思います。

HTML
1<div class="open_text">
2    <img src="https://placehold.jp/1100x169.png" alt="">
3    <p>
4        元気１００倍アンパンマンを好きになろう！！
5    </p>
6</div>
7

CSS
1.open_text{
2    position: relative;
3}
4.open_text img{
5    width: 100%;
6    height: auto;
7}
8.open_text p {
9    font-size:18px;
10    font-weight:bold;
11
12    position: absolute;
13    top: 0;
14    left: 0;
15    right: 0;
16    bottom: 0;
17
18    display: flex;
19    align-items: center;
20    justify-content: center;
21    text-align: center;
22}