Атрибут width тега <iframe>

Описание

Атрибут width определяет ширину элемента <iframe> в пикселях. Задает горизонтальный размер области отображения встроенного содержимого.

Пример использования:
<iframe src="https://example.com" width="800" height="600"> </iframe>

Способы задания ширины:

Тип значения Пример Применение
Фиксированное (px) width="300" Точный контроль размера
Процентное style="width: 100%;" Адаптивный дизайн
Автоматическое style="width: auto;" Под содержимое (требует JS)
Viewport-единицы style="width: 50vw;" Относительно окна браузера

Адаптивный iframe:

<div class="iframe-container"> <iframe src="responsive-content.html" style="width: 100%; height: 400px;" allowfullscreen> </iframe> </div> <style> .iframe-container { max-width: 1200px; margin: 0 auto; } </style>

Динамическое изменение ширины:

<iframe id="resizableFrame" src="content.html" width="500"></iframe> <button onclick="resizeFrame()">Переключить размер</button> <script> function resizeFrame() { const frame = document.getElementById('resizableFrame'); frame.width = frame.width === '500' ? '800' : '500'; } </script>

Рекомендации по использованию:

  • Всегда указывайте height вместе с width
  • Для адаптивности используйте CSS вместо HTML-атрибута
  • Минимальная рекомендуемая ширина - 200px
  • Учитывайте минимальные требования встраиваемого контента

Соотношение сторон:

<style> .responsive-iframe { width: 100%; aspect-ratio: 16/9; } </style> <iframe class="responsive-iframe" src="video.html"> </iframe>

Ограничения и совместимость:

  • Поддерживается всеми браузерами
  • Процентные значения в атрибуте width не работают (только через CSS)
  • Минимальная ширина может игнорироваться для сложного контента
  • Может вызывать проблемы с макетом при ресайзе

Примечание: Для современных проектов предпочтительнее использовать CSS-свойства width, max-width и aspect-ratio вместо HTML-атрибута. Это обеспечивает лучшую адаптивность и контроль над отображением на разных устройствах.