object-fit
Vlastnost object-fit specifikuje jak by měl být tag <img> nebo <video> roztáhnutý pro jejich obal
object-fit hodnoty:
- fill - defaultní hodnota - obsah je roztáhnut na content box - vzniká deformace obrázku
- contain - obsah je roztáhnut na content box, ale zachová si svoje ratio - vznikají rámečky
- cover - obsah je co nejvíc roztáhnut na content box, ale zachová si svoje ratio - nevznikají žádné rámečky - obsah, která přetéka je automaticky odříznut
Editor
Pro živou ukázku je CSS a JavaScript vepsaný přímo v dokumentu - v praxi tyto soubory vždy oddělujte do externích souborů
<!DOCTYPE html>
<html>
<head>
<style>
img {
object-fit: cover;
width: 600px;
height: 200px;
}
</style>
</head>
<body>
<img src="../../res/img/elementdiagram.png" alt="elementdiagram.png">
</body>
</html>