如何使我的圖像背景以任何尺寸響應

Question

大家好，任何人都可以幫我解決這個問題，當我嘗試在小屏幕上查看我的設計時，圖像背景在大屏幕上看起來不一樣，誰能幫我實現它？ 第一張圖片是我一直在使用的背景。

 .container-flex.lgn-customize { position: relative; width: 100%; background-color: #fff; min-height: 100vh; overflow: hidden; /* background-image: url(/materials/media/icons/login-icon/login_bg.png); */ background-position: bottom center; background-repeat: no-repeat; background-size: cover; }.nk.container-flex { width: 100%; max-width: initial; margin-left: auto; margin-right: auto; }.container-flex.lgn-customize::before { content: ""; position: absolute; height: 100%; width: 100%; top: 49%; transform: translate(100%, -50%); right: 0%; transform: translateY(-50%); background-image: url(/materials/media/icons/login-icon/test222111.png); /* background-position: bottom center; */ background-repeat: no-repeat; background-size: cover; /* transition: 1s ease-in-out; */ /* border-radius: 50%; */ z-index: 6; }

 <div class="container-flex lgn-customize"> </div>

Answer 1

嘗試將 background-size 屬性設置為包含。 它告訴瀏覽器背景圖像縮放以適應內容區域，而不會丟失其縱橫比。

 <style>.container-flex.lgn-customize { position: relative; width: 100%; background-color: #fff; min-height: 100vh; overflow: hidden; background-image: url('https://images.unsplash.com/photo-1604085572504-a392ddf0d86a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8b3JhbmdlJTIwZmxvd2VyfGVufDB8fDB8fA%3D%3D&w=1000&q=80'); background-position: bottom center; background-repeat: no-repeat; background-size:contain; }.nk.container-flex { width: 100%; max-width: initial; margin-left: auto; margin-right: auto; }.container-flex.lgn-customize::before { content: ""; position: absolute; height: 100%; width: 100%; top: 49%; transform: translate(100%, -50%); right: 0%; transform: translateY(-50%); background-image: url(/materials/media/icons/login-icon/test222111.png); /* background-position: bottom center; */ background-repeat: no-repeat; background-size: cover; /* transition: 1s ease-in-out; */ /* border-radius: 50%; */ z-index: 6; } </style> <div class="container-flex lgn-customize"> </div>