Določitev velikost elementov s CSS

Dimenzije elementa določimo z lastnostmi za širino in višino. Pri tem lahko določimo dejansko velikost elementa ali pa samo najmanjšo oziroma največjo dovoljeno vrednost.

Pomni: Lastnosti width in height privzeto določata velikost območja vsebine elementa. Če uporabimo box-sizing: border-box, pa določata velikost elementa do roba.

V sodobnem CSS poleg osnovnih lastnosti za širino in višino pogosto uporabljamo tudi max-width za odzivno postavitev ter aspect-ratio za ohranjanje razmerja med širino in višino.

Osnovna pravila

width določa širino elementa.
height določa višino elementa.
min-width in min-height določata najmanjšo dovoljeno velikost.
max-width in max-height določata največjo dovoljeno velikost.
aspect-ratio določa želeno razmerje med širino in višino elementa.

Pozor: Pri besedilu je treba biti previden pri fiksnih višinah. Če je višina premajhna, se lahko vsebina preliva ali pa postane prikaz manj pregleden.

height

Z lastnostjo height določimo višino elementa. Privzeto ta lastnost določa višino območja vsebine elementa. Če je uporabljen box-sizing: border-box, pa določa višino elementa do roba.

Vrednost	Pomen
`auto`	samodejna nastavitev višine
`dolžina`	višina, na primer v `px`, `em` ali `rem`
`%`	relativna višina v odstotkih glede na nadrejeni element z določeno višino
`inherit`	vrednost podeduje od nadrejenega elementa

<img class="auto" src="css.png" width="100" height="100" alt="Logo CSS">
<br>
<img class="slika" src="css.png" width="100" height="100" alt="Logo CSS">
<br>
<br>
<p class="visina">To je odstavek besedila, ki ima določeno višino z lastnostjo <em>height: 100px</em>.</p>
<p>To je običajen odstavek besedila.</p>

.auto { height: auto; }
.slika { height: 50px; }
.visina { height: 100px; background-color: #fccc88; }

To je odstavek besedila, ki ima določeno višino z lastnostjo height: 100px.

To je običajen odstavek besedila.

max-height

Z lastnostjo max-height določimo največjo dovoljeno višino elementa. Uporabljena višina elementa ne more biti večja od te vrednosti.

Vrednost	Pomen
`none`	brez omejitve višine
`dolžina`	največja višina, na primer v `px`, `em` ali `rem`
`%`	relativna največja višina v odstotkih
`inherit`	vrednost podeduje od nadrejenega elementa

<p class="max-visina">To je odstavek besedila, ki ima določeno največjo višino z lastnostjo <em>max-height: 30px</em>.</p>

.max-visina { max-height: 30px; background-color: #fccc88; }

To je odstavek besedila, ki ima določeno največjo višino z lastnostjo max-height: 30px. To je daljše besedilo, zato lahko preseže razpoložljivi prostor.

min-height

Z lastnostjo min-height določimo najmanjšo dovoljeno višino elementa. Uporabljena višina elementa ne more biti manjša od te vrednosti.

Vrednost	Pomen
`dolžina`	najmanjša višina, na primer v `px`, `em` ali `rem`
`%`	relativna najmanjša višina v odstotkih
`inherit`	vrednost podeduje od nadrejenega elementa

<p class="min-visina">To je odstavek besedila, ki ima določeno najmanjšo višino z lastnostjo <em>min-height: 100px</em>.</p>

.min-visina { min-height: 100px; background-color: #fccc88; }

To je odstavek besedila, ki ima določeno najmanjšo višino z lastnostjo min-height: 100px.

width

Z lastnostjo width določimo širino elementa. Privzeto ta lastnost določa širino območja vsebine elementa. Če je uporabljen box-sizing: border-box, pa določa širino elementa do roba.

Vrednost	Pomen
`auto`	samodejna nastavitev širine
`dolžina`	širina, na primer v `px`, `em` ali `rem`
`%`	relativna širina v odstotkih glede na širino nadrejenega elementa
`inherit`	vrednost podeduje od nadrejenega elementa

<img class="auto" src="css.png" width="100" height="100" alt="Logo CSS">
<br>
<img class="slika" src="css.png" width="100" height="100" alt="Logo CSS">
<br>
<br>
<p class="sirina">To je odstavek besedila, ki ima določeno širino z lastnostjo <em>width: 200px</em>.</p>
<p>To je običajen odstavek besedila.</p>

.auto { width: auto; }
.slika { width: 50px; }
.sirina { width: 200px; background-color: #fccc88; }

To je odstavek besedila, ki ima določeno širino z lastnostjo width: 200px.

To je običajen odstavek besedila.

max-width

Z lastnostjo max-width določimo največjo dovoljeno širino elementa. Uporabljena širina elementa ne more biti večja od te vrednosti.

Vrednost	Pomen
`none`	brez omejitve širine
`dolžina`	največja širina, na primer v `px`, `em` ali `rem`
`%`	relativna največja širina v odstotkih glede na širino nadrejenega elementa
`inherit`	vrednost podeduje od nadrejenega elementa

<p class="max-sirina">To je odstavek besedila, ki ima določeno največjo širino z lastnostjo <em>max-width: 200px</em>.</p>

.max-sirina { max-width: 200px; background-color: #fccc88; }

To je odstavek besedila, ki ima določeno največjo širino z lastnostjo max-width: 200px. To je daljše besedilo, zato se prelomi v več vrstic.

Pri odzivnem oblikovanju je max-width pogosto uporabnejša od fiksne lastnosti width. Pogost primer je img { max-width: 100%; height: auto; }, saj se slika prilagaja širini nadrejenega elementa in pri tem ohrani razmerje stranic.

min-width

Z lastnostjo min-width določimo najmanjšo dovoljeno širino elementa. Uporabljena širina elementa ne more biti manjša od te vrednosti.

Vrednost	Pomen
`dolžina`	najmanjša širina, na primer v `px`, `em` ali `rem`
`%`	relativna najmanjša širina v odstotkih
`inherit`	vrednost podeduje od nadrejenega elementa

<p class="min-sirina">To je odstavek besedila, ki ima določeno najmanjšo širino z lastnostjo <em>min-width: 300px</em>.</p>

.min-sirina { min-width: 300px; background-color: #fccc88; }

To je odstavek besedila, ki ima določeno najmanjšo širino z lastnostjo min-width: 300px. To je odstavek besedila, ki ima določeno najmanjšo širino z lastnostjo min-width: 300px.

Dodatna sodobna lastnost: `aspect-ratio`

V sodobnem CSS lahko z lastnostjo aspect-ratio določimo želeno razmerje med širino in višino elementa. Ta lastnost je posebej uporabna pri slikah, videih, karticah in drugih odzivnih blokih. Če sta hkrati izrecno določeni tako širina kot višina, lastnost aspect-ratio nima učinka.

.kvadrat {
   width: 200px;
   aspect-ratio: 1 / 1;
   background-color: #fccc88;
}

Pomni: Zapis aspect-ratio: 1 / 1; pomeni razmerje širina proti višini. Tak element bo kvadratne oblike, če druga pravila ne določijo drugače.

Priporočila

Pri odzivni postavitvi pogosto raje uporabi max-width kot fiksni width.
Pri slikah pogosto uporabi kombinacijo max-width: 100% in height: auto.
Pri besedilu se izogibaj prenizkim fiksnim višinam.
Kadar želiš ohranjati obliko elementa, uporabi aspect-ratio.
Pri oblikovanju vedno ločuj med dejansko velikostjo, najmanjšo velikostjo in največjo velikostjo.

Pogoste napake

Zamenjevanje lastnosti width in max-width.
Pričakovanje, da bo odstotkovna višina delovala brez določene višine nadrejenega elementa.
Nastavljanje prenizke fiksne višine elementom z daljšim besedilom.
Hkratna določitev fiksne širine in višine ter pričakovanje, da bo aspect-ratio še vedno vplival na velikost.

Nazaj

Naprej