容器超過寬度 100%

Question

我想知道你們中的任何人都可以幫我解決這個容器寬度問題嗎？ 當我在移動視圖中時，容器寬度由於某種原因超過 100%。 我嘗試將寬度減小到 90%，它確實從移動視圖中解決了問題，但是在 PC 上它會將圖像移動到左側而不是停留在中間。 我還嘗試添加溢出：隱藏/自動，但它會將我的圖像切成兩半並且它不允許我滾動。

這是移動視圖，注意左邊的空白。

這是 PC 上的圖像，我希望它保持原樣。 更改容器的寬度會將這些圖像向左移動。

 .container1 { display: flex; width: 100%; align-items: center; justify-content: center; } .container1 > div { padding: 0px 5px; max-width: 100%; height: 325px; } .container1 div img { width: 100%; height: 100%; object-fit: cover; } @media screen and (max-width: 780px) { .container1 { flex-direction: column; } .container1 > div { padding: 10px 5px; } } .zgrade { position: relative; max-width: 80%; margin-left: auto; margin-right: auto; overflow: hidden; width: 745px; min-width: 466px; } .zgradeimg { width: 500px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.4s ease-in-out; } .zgrade:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); }

 <div class="container1"> <div class="row justify-content-center w-80"> <div class="zgrade"> <a href="zgradaA.html"><img src="assets/img/szgrade/zgradaA.jpg"/></a> </div> <br> <div class="zgrade"><img src="assets/img/szgrade/zgradaB.jpg"/></div> </div> </div> <div class="p-6"></div> <div class="container1"> <div class="row justify-content-center w-80"> <div class="zgrade"> <img src="assets/img/szgrade/zgradaC.jpg"/></div> <br> <div class="zgrade"><img src="assets/img/szgrade/zgradaD.jpg"/></div> </div> </div>

Answer 1

因此，我嘗試將所有寬度更改為最大寬度，以免它們溢出，將媒體查詢移至底部。 請參閱下面我制作的示例，如果這能解決您的問題，請告訴我。

 .container1 { display: flex; width: 100%; align-items: center; justify-content: center; } .container1 > div { padding: 0px 5px; max-width: 100%; height: 325px; } .container1 div img { width: 100%; height: 100%; object-fit: cover; } .zgrade { position: relative; max-width: 100%; margin-left: auto; margin-right: auto; overflow: hidden; max-width: 745px; min-width: 320px; } .zgradeimg { width: 500px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.4s ease-in-out; } .zgrade:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } @media screen and (max-width: 780px) { .container1 { flex-direction: column; } .container1 > div { padding: 10px 5px; } }

 <div class="container1"> <div class="row justify-content-center w-80"> <div class="zgrade"> <a href="zgradaA.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Angel_of_the_North_silhouette.jpg/1024px-Angel_of_the_North_silhouette.jpg"/></a> </div> <br> <div class="zgrade"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Angel_of_the_North_silhouette.jpg/1024px-Angel_of_the_North_silhouette.jpg"/></div> </div> </div> <div class="p-6"></div> <div class="container1"> <div class="row justify-content-center w-80"> <div class="zgrade"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Angel_of_the_North_silhouette.jpg/1024px-Angel_of_the_North_silhouette.jpg"/></div> <br> <div class="zgrade"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Angel_of_the_North_silhouette.jpg/1024px-Angel_of_the_North_silhouette.jpg"/></div> </div> </div>