レスポンシブサイトで背景画像の表示の比率をPCサイトで見た時と同じ比率で画面サイズに合わせて縮小させたい

前提・実現したいこと

下記はタブレットサイト用で、レスポンシブです。背景画像の上に画像や文字があるソースなのですが、
PCサイトで見た場合は、背景画像が背景色よりも一回り小さく表示されるのですが、レスポンシブになると画面いっぱいに背景画像が表示されてしまいます。
PCサイトと同じ比率で表示させるにはどうしたらいいでしょうか？

PCサイトの場合は横幅は1100pxにしています。
ソースはタブレットで見た場合のコードです。

発生している問題・エラーメッセージ

エラーメッセージ


<article class="ABox1">
	<p class="menuImg"><img src="300X200.png"></p>
	<div class="AMain">
		
				<div class="BBox">
					<div class="box">
		<div class="Ainfo1">
		<p class="ATitle">テスト</p>
		<p class="ALine"><img src="800X5.png"></p>
		<p class="okay"><img src="400X400.png"></p>
		<p class="copyText1">テストテストテスト</p>
		<p class="copyText2">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
					
		</div>
		</div>		
		</div>
</article>

.ABox1　{
background:red;
}
.ABox1 .BBox {
		display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
  		display: flex;
  		justify-content: center;
  		align-items: center;
	}

.ABox1 .menuImg {
		text-align:center;
	margin-bottom:55px;
	}
	
.ABox1 .AMain {
		width:100%;
		background:#f8efd0;
		background-image:url("1018X860.png");
		background-repeat:no-repeat;
		background-position: center;
		width:100%;
		background-size: contain;
    padding-top: 84.47%;

    position: relative;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
  		display: flex;
		justify-content: center;
  		align-items: center;
	}
	
	.foodMenuBox1 .mujouBox .box {
		position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	}
	
.ABox1 .ATitle {
		font-size:31px;
	}

.ABox1 .ALine {
		text-align:center;
	}
	
.ABox1 .okay {
		text-align:center;
	}