Атрибут width тега <object> — ширина об'єкта
Атрибут width задає ширину об'єкта в пікселях. В задані розміри входить не тільки саме зображення, наприклад в разі відтворення відеофайлу, а й панель керування ним, включаючи кнопки програвання, паузи, зупинки і т. Д. З цієї причини на розмір відображуваного об'єкта впливає тип файлу і застосовуваний плагін.
Якщо використовується процентний запис, то розміри об'єкта обчислюються щодо батьківського елементу - контейнера, де знаходиться елемент <object>. У разі відсутності батьківського контейнера, в його якості виступає вікно браузера. Іншими словами, width = "100%" означає, що об'єкт буде займати всю доступну ширину веб-сторінки.
Загальний опис
автор: NagarD
Синтаксис
<object width="pixels">Атрибут width може отримувати єдине значення:
-
pixels -
Ширина об'єкта в пікселях (тобто width="100")
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<p> Приклад використання атрибуту <code> width </code> </p>
<p id="text"> Поточна ширина video: 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>
<object id ="image" width="100" height="100"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>
</div>
<div class="block1" >
<p> Без використання атрибуту <code> width </code> </p>
<object width="100" height="100"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>
</div>CSS
.block1{
float:left;
width:80%;
border:2px solid black;
}JS
function f() {
var width = document.getElementById("range").value;
var image = document.getElementById("image");
image.setAttribute("width", width);
text.innerHTML = "Поточна ширина video " + width;
}
//# sourceURL=pen.js<p> З використанням атрибуту <code> width </code> </p>
<object id ="image" width="400"
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>
<br>
<p> Без використання атрибуту <code> width </code> </p>
<object
data="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='180'%3E%3Crect%20width='320'%20height='180'%20fill='%231b2536'/%3E%3Crect%20x='12'%20y='12'%20width='296'%20height='156'%20fill='%23264653'/%3E%3Ccircle%20cx='160'%20cy='90'%20r='42'%20fill='%23e63946'/%3E%3Cpath%20d='M146%2066%20192%2090%20146%20114Z'%20fill='%23ffffff'/%3E%3C/svg%3E">
</object>Чотири однакові вставки з одним і тим самим SVG: width="200" (висота дорахувалася сама), width="50%" від батьківського блока, той самий width="200" проти правила в стилях (виграє CSS) і вставка без data — нульова коробка попри задані розміри.
HTML
<p>1. width="200" — SVG 100×50 розтягнуто вдвічі, висоту дораховано за пропорціями:</p>
<object width="200" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' width='100%25' height='100%25'%3E%3Crect width='100' height='50' fill='%23f2b134'/%3E%3Ccircle cx='50' cy='25' r='16' fill='%23ffffff'/%3E%3C/svg%3E"></object>
<p>2. width="50%" — половина ширини сірої рамки завширшки 320px:</p>
<div class="frame">
<object width="50%" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' width='100%25' height='100%25'%3E%3Crect width='100' height='50' fill='%2372b043'/%3E%3Ccircle cx='50' cy='25' r='16' fill='%23ffffff'/%3E%3C/svg%3E"></object>
</div>
<p>3. Той самий width="200", але в стилях написано 300px — атрибут програє:</p>
<object class="wide" width="200" data="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' width='100%25' height='100%25'%3E%3Crect width='100' height='50' fill='%232f6fd0'/%3E%3Ccircle cx='50' cy='25' r='16' fill='%23ffffff'/%3E%3C/svg%3E"></object>
<p>4. Розміри задано, а data немає — коробки на сторінці не існує:</p>
<object width="200" height="60"></object><span class="mark">← ліворуч порожньо: коробки немає взагалі</span>CSS
p {
margin: 16px 0 6px;
max-width: 520px;
}
object {
vertical-align: middle;
outline: 2px dashed #d64545;
}
.wide {
width: 300px;
}
.frame {
width: 320px;
padding: 6px;
border: 1px solid #b9c6d8;
background: #f6f9ff;
}
.mark {
color: #c0392b;
font-size: .9em;
}Коментарі
Коментарів ще немає — будьте першим!