Как растянуть Яндекс Карту на весь экран
Растяжение самой карты
Нужно в конструкторе карт отметить «Растянуть по ширине». Если нет доступа к конструктору, то можно тегу iframe задать атрибут width="100%".
Если карта в виде Javscript, то ширину нужно задать так: width=100%25&
Пример с iframe
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Abd52fbd33e8e3632ad4d86... width="100%" height="400" frameborder="0"></iframe>Пример с Javascript
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Abd52fbd33e8e3632ad4d86bd07ee8d9f0dc09e78e5f2e52084c05ada3cd4a044&width=100%25&height=400&lang=ru_RU&scroll=true"></script>
Растяжение контейнера-обёртки
Нужно задать ширину 100vw и выровнять по центру, как в коде ниже.
И на всякий случай указать max-width:100vw, чтобы перебить адаптивные стили шаблона.
HTML
<div class="map">
<iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3A461b4eb0c32528c418a1a8... width="100%" height="400" frameborder="0"></iframe>
</div>CSS
.map {
width:100vw;
margin-left: calc((100% - 100vw) / 2 + 27px + 27px);
/* Выравниваем по центру. 27px это отступы контейнера страницы. У Вас они будут другими. */
max-width:100vw;
}
iframe {
max-width:100vw;
}Пример
Добавить комментарий