Атрибут width тега <iframe> — ширина вбудованої рамки
Атрибут width визначає ширину елементa <iframe> в пікселях.
Допускається використання значення в пікселах або відсотках. Якщо встановлений процентний запис, то розміри фрейма обчислюються щодо батьківського елементу - контейнера, де знаходиться тег <iframe>. У разі відсутності батьківського контейнера, в його якості виступає вікно браузера.
Загальний опис
автор: NagarD
Синтаксис
<iframe width="pixels">Атрибут width може отримувати єдине значення:
-
pixels -
Ширина поточного фрейму у пікселях.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<p> Приклад використання атрибуту <code> width </code> </p>
<p id="text"> Поточна ширина фрейма: 100 </p>
<input type="range" id="range" min="0" max="500" step="1" name="range">
<input type="button" value="Встановити ширину" onclick="f()">
<hr>
<div class="block1" >
<p> З використанням атрибуту <code> width </code> </p>
<iframe id="image" title="Демонстраційна рамка" srcdoc="<p style='font:14px sans-serif;margin:6px'>Документ усередині рамки</p>" width="100"></iframe>
</div>
<div class="block1" >
<p> Без використання атрибуту <code> width </code> </p>
<iframe title="Демонстраційна рамка" srcdoc="<p style='font:14px sans-serif;margin:6px'>Документ усередині рамки</p>"></iframe>
</div>CSS
.block1{
float:left;
}JS
function f() {
var width = document.getElementById("range").value;
var image = document.getElementById("image");
image.setAttribute("width", width);
text.innerHTML = "Поточна ширина зображення " + width;
}
//# sourceURL=pen.jsП'ять фреймів із власним вмістом у srcdoc. Видно, що без атрибутів фрейм займає типові 300×150 хай який у ньому текст, що до width="200" додається рамка, що два фрейми по 50% не влазять у рядок — і як та сама пара стає поруч, коли ширину задано стилями з box-sizing: border-box.
HTML
<p class="head">1. Без атрибутів — 300×150, хай який вміст</p>
<iframe srcdoc="<p style='margin:0;font:14px sans-serif;background:#eef3fb'>Короткий рядок.</p>"></iframe>
<iframe srcdoc="<div style='margin:0;height:800px;font:14px sans-serif;background:linear-gradient(#eef3fb,#2f6fd0)'>Вміст заввишки 800 пікселів.</div>"></iframe>
<p class="head">2. width="200" height="80" — на сторінці 204 пікселі</p>
<iframe width="200" height="80" srcdoc="<p style='margin:0;font:14px sans-serif;background:#f3fbf4'>width=200</p>"></iframe>
<p class="head">3. Два фрейми по width="50%" — другий падає вниз</p>
<div class="row">
<iframe width="50%" height="60" srcdoc="<p style='margin:0;font:14px sans-serif;background:#fdeeee'>50%</p>"></iframe><iframe width="50%" height="60" srcdoc="<p style='margin:0;font:14px sans-serif;background:#fdeeee'>50%</p>"></iframe>
</div>
<p class="head">4. Та сама пара шириною зі стилів і box-sizing: border-box</p>
<div class="row">
<iframe class="half" srcdoc="<p style='margin:0;font:14px sans-serif;background:#f3fbf4'>50%</p>"></iframe><iframe class="half" srcdoc="<p style='margin:0;font:14px sans-serif;background:#f3fbf4'>50%</p>"></iframe>
</div>
<p class="head">5. Гумовий фрейм: 100% і aspect-ratio 16 / 9</p>
<iframe class="fluid" width="640" height="360" srcdoc="<p style='margin:0;font:14px sans-serif;background:#eef3fb'>Ширина 100%, висота — за співвідношенням сторін.</p>"></iframe>CSS
p {
margin: 14px 0 6px;
max-width: 560px;
}
.head {
margin: 24px 0 8px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
iframe {
outline: 2px dashed #d64545;
outline-offset: 2px;
}
.row {
width: 480px;
padding: 4px;
border: 1px solid #b9c6d8;
background: #f6f9ff;
font-size: 0;
}
.half {
box-sizing: border-box;
width: 50%;
height: 60px;
}
.fluid {
display: block;
width: 100%;
max-width: 560px;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}Різниця між HTML 4.01 та HTML5
Атрибут width для тегу <iframe> у HTML5 може мати значення лише у пікселях, а в HTML 4.01 може бути в пікселях та %.
Коментарі
Коментарів ще немає — будьте першим!