Někdy je potřeba umístit obrázek do určité dané dimenze. Velikost obrázku můžeme změnit zadáním šířky a výšky obrázku. Běžným řešením je použití max-šířka: 100 %; a výška: auto; aby velké obrázky nepřesahovaly šířku jejich kontejneru. The max. šířka a Maximální výška vlastnosti CSS fungují lépe, ale nejsou podporovány v mnoha prohlížečích.

průchod předobjednávky

Dalším způsobem změny velikosti obrázku je použití objekt-fit vlastnost, která odpovídá obrázku. Tato vlastnost CSS určuje, jak se změní velikost videa nebo obrázku, aby se vešel do rámečku obsahu. Definuje, jak se prvek vejde do kontejneru se stanovenou šířkou a výškou.

The objekt-fit vlastnost se obecně aplikuje na obrázek nebo video. Tato vlastnost definuje, jak prvek reaguje na šířku a výšku svého kontejneru. Jde hlavně o pět hodnot objekt-fit majetek jako např vyplnit, obsahovat, zakrýt, žádný, zmenšení, počáteční , a zdědit . Výchozí hodnota této vlastnosti je 'vyplnit' .

Příklad

V tomto příkladu měníme velikost obrázku pomocí max-šířka: 100 %; a výška: auto; vlastnosti.

 cell padding div { width: auto; text-align: center; padding: 15px; border: 3px solid red; } img { max-width: 100%; height: auto; } <img src="forest.webp"> 

Výstup

Příklad

V tomto příkladu používáme přizpůsobení předmětu: kryt; vlastnictví.

jak přejmenovat adresář linux

 div { width: 300px; height: auto; text-align: center; padding: 15px; border: 3px solid red; } img { object-fit: cover; } <img src="forest.webp" width="300" height="300"> 

Výstup

Ve výše uvedeném příkladu jsme použili Pokrýt hodnota objekt-fit vlastnictví. Podobně jako ve výše uvedeném příkladu můžeme použít další hodnoty the objekt-fit vlastnost za účelem změny velikosti obrázku.