Масштабирование содержимого iframe в HTML до 80%

Быстрый ответ

Для того, чтобы регулировать масштаб содержимого iframe, примените CSS-свойство transform: scale(0.5); непосредственно к iframe или его родительскому контейнеру. Это уменьшит размер в два раза. Вот пример его использования:

<div style="overflow: auto; transform: scale(0.5); transform-origin: top left;">
  <iframe src="page.html" style="width: 200%; height: 200%;"></iframe>
</div>

Увеличьте размер iframe в ширину и высоту до 200%, чтобы содержимое отображалось корректно после трансформации.

Пошаговое руководство по регулированию масштаба содержимого iframe

Масштабирование с помощью трансформаций CSS

С помощью свойства transform можно отрегулировать масштаб iframe, сохраняя при этом его исходное расположение. Ширина и высота должны соответствовать масштабу:

iframe {
  width: 200%;   
  height: 200%; 
  transform: scale(0.5);  
  transform-origin: top left; 
}

Подробнее об этом расскажет наш спикер на видео

Обеспечение кроссбраузерной совместимости

Для обеспечения совместимости с различными браузерами используйте префиксы:

iframe {
  -moz-transform: scale(0.5); 
  -o-transform: scale(0.5); 
  -webkit-transform: scale(0.5); 
  transform: scale(0.5);
  transform-origin: top left;
  width: 200%;
  height: 200%;
}

Регулирование масштаба в Internet Explorer

Для поддержки Internet Explorer воспользуйтесь свойством zoom:

iframe {
  zoom: 0.5; 
}

Избегание появления полос прокрутки

Для того, чтобы избавиться от нежелательных полос прокрутки, примените overflow: hidden:

iframe {
  overflow: hidden;
}

Больше возможностей с div

Для расширения стилевых возможностей используйте контейнер div вокруг iframe:

<div class="iframe-container">
  <iframe src="page.html"></iframe>
</div>

Затем настройте стили контейнера, чтобы получить больше контрольных рычагов:

.iframe-container {
  overflow: hidden;
  transform: scale(0.75);
  transform-origin: top left;
  width: 133.33%;
  height: 133.33%;
}

Адаптивность на всех устройствах

Важно убедиться, что регулирование масштаба представления содержимого адаптивно для различных размеров экранов.

Визуализация

Возьмём за пример галерею, содержащую изображения разного размера:

Художественная Галерея 🖼️ (iframe): [Большой Ван Гог, карандашный набросок Моны Лизы, Средний Энди Уорхол]

Применяя CSS transform scale, Вы сможете регулировать масштаб галереи, чтобы увидеть детали каждого произведения искусства.

iframe {
  transform: scale(0.75); 
}

Результат: Сбалансированный подход к отображению содержимого на вашем сайте.

Настройка трансформаций

Настройте точку трансформации transform-origin согласно своим предпочтениям.

iframe {
  transform-origin: 0 0; 
}

Инлайн стили против внешних таблиц стилей

Для тестирования используйте инлайн-стили, но для окончательной версии сайта рекомендовано использовать внешние таблицы стилей:

.iframe-container > iframe {
  transform: scale(0.75);
}

Инновации и стандарты

Следите за обновлениями и рекомендациями стандартов и лучших практик разработки, чтобы быть в курсе последних тенденций.

Полезные материалы

1. Масштабирование содержимого с помощью CSS и JavaScript | CSS-Tricks — Глубокое погружение в мир масштабирования содержимого в iframe.
2. Как регулировать масштаб содержимого iframe? – Stack Overflow — Дискуссия и разрешение вопросов, связанных с масштабированием адаптивных iframe.
3. transform – CSS | MDN — Энциклопедия знаний о CSS-трансформациях, предоставляемая MDN.
4. Создание адаптивных iframe — Инструкция по созданию адаптивных iframe.
5. Встраиваемое содержимое в адаптивных iframe — Smashing Magazine — Стратегии для формирования адаптивного встраиваемого содержимого.
6. Создание внутренних пропорций для видео – A List Apart — Освещение темы поддержания пропорций для встроенного видео.