Как сделать чтобы элемент с position: fixed; масштабировался по центру со всеми элементами?
Можно ли сделать это через js?
<div id="wrappers" class="wrappers"> <div class="container1"> <div id="place_screen"> <div class="background_imgs"> <img src="imgs_screenimg_primorie1.png"> <img src="imgs_screenimg_primorie2.png"> <img src="imgs_screenimg_primorie3.png"> <img src="imgs_screenimg_primorie4.png"> <img src="imgs_screenimg_primorie5.png"> <img src="imgs_screenimg_primorie6.png"> <img src="imgs_screenimg_primorie7.png"> <img src="imgs_screenimg_primorie8.png"> </div> <div class="name_hotel">ПРИМОРЬЕ GRAND RESORT HOTEL </div> </div> |
<div id="wrappers" class="wrappers"> <div class="container1"> <div id="place_screen"> <div class="background_imgs"> <img src="imgs_screenimg_primorie1.png"> <img src="imgs_screenimg_primorie2.png"> <img src="imgs_screenimg_primorie3.png"> <img src="imgs_screenimg_primorie4.png"> <img src="imgs_screenimg_primorie5.png"> <img src="imgs_screenimg_primorie6.png"> <img src="imgs_screenimg_primorie7.png"> <img src="imgs_screenimg_primorie8.png"> </div> <div class="name_hotel">ПРИМОРЬЕ GRAND RESORT HOTEL </div> </div>
#place_screen { position: fixed; top: 100px; left: 100px; width: calc(100% - 200px); height: calc(100% - 200px); background-color: #fff; z-index: 1000; display: none; overflow-y: scroll; } #place_screen.hide { opacity: 1; display: block; } .wrappers { max-width: 1920px; margin-left: auto; margin-right: auto; } |
#place_screen { position: fixed; top: 100px; left: 100px; width: calc(100% - 200px); height: calc(100% - 200px); background-color: #fff; z-index: 1000; display: none; overflow-y: scroll; } #place_screen.hide { opacity: 1; display: block; } .wrappers { max-width: 1920px; margin-left: auto; margin-right: auto; }
Дополнительно:
Ответы:
.wrappers { max-width: 1920px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } #place_screen { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 200px); height: calc(100% - 200px); background-color: #fff; z-index: 1000; display: none; overflow-y: scroll; } #place_screen.hide { opacity: 1; display: block; } |
.wrappers { max-width: 1920px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } #place_screen { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 200px); height: calc(100% - 200px); background-color: #fff; z-index: 1000; display: none; overflow-y: scroll; } #place_screen.hide { opacity: 1; display: block; }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы элемент с CSS свойством `position: fixed;` масштабировался по центру со всеми элементами, можно использовать следующий подход.
Сначала необходимо создать контейнер, в котором будет находиться ваш элемент с `position: fixed;`. Для этого можно использовать дополнительный `
```html
.container {
position: relative;
width: 100%;
height: 100vh;
}
.fixed-element {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #f0f0f0;
padding: 10px;
}
```
В данном примере, контейнеру задается `position: relative;`, чтобы элемент с `position: fixed;` мог относиться к нему. Элементу с `position: fixed;` задаются значения `top: 50%;` и `left: 50%;`, чтобы элемент располагался по центру экрана. Затем, с помощью `transform: translate(-50%, -50%);` элемент сдвигается на половину своей ширины и высоты, чтобы быть точно по центру.
Таким образом, ваш элемент с `position: fixed;` будет масштабироваться по центру относительно других элементов на странице. Не забудьте адаптировать стили под ваши конкретные требования и дизайн страницы.