CSS img max-width: 100%

Question 1

Pokud máme určit, max-width: 100% obrazového prvku (například obrázek 250 pixelů * 500px) a my jsme dali tento obrázek uvnitř nadřazený prvek o šířce 1000px, pak v případě, že rodič je zmenšil <= 500px, obraz se odpovídajícím způsobem zmenšit zabírat celou délku mateřské. Nicméně, pokud rodič šířka je v > 500px, obraz nebude zmenšen nahoru, ale na své původní 500px.

Co mě mate, je smysl 100%. Z mého chápání, relativní procento je vždy s ohledem na jeho rodiče. Tak neznamená to, že maximální šířka je vždy aktuální šířku jeho rodič? Takže obraz bude vždy zmenšil/zmenšen, aby se vešly jeho rodiče, protože šířka max je 100%? Co mám nedorozumění? jak pochopit, relativní procento použity v max-width v tomto případě? Co je to relativní? Díky!!!

Question 2

Ano, tam je rozdíl mezi width a max-width.

Tato definice z w3school bude dělat to pro vás snadné pochopit.

https://www.w3schools.com/cssref/pr_dim_max-width.asp

Na max-width vlastnost určuje maximální šířku prvku.

Pokud je obsah větší, než je maximální šířka, bude to automaticky změnit výšku prvku.

Je-li obsah je menší než maximální šířku max-width vlastnost nemá žádný vliv.

Poznámka: tím se zabrání hodnotu width majetku z stává větší než max-width. Hodnota max-width vlastnost přepíše na width nemovitosti.

Přijde na vaši otázku teď, pokud jste nahradit max-width s width a zkontrolujte, zda šířka obrazu na bod zlomu >=500px nebo <500px, bude-samozřejmě vzít rodiče v plné šířce.

Ale jak vyplývá z výše uvedené definice, max-width je si jistý prvek šířka nemá jít nad určitou šířku (bez ohledu na to, co je rodič, šířka) a to je důvod, proč tato vlastnost byla uvedena do.

Imran Rafiq Rather · Answer 1 · 2021-11-24T03:21:07

Ano, tam je rozdíl mezi width a max-width.

Tato definice z w3school bude dělat to pro vás snadné pochopit.

https://www.w3schools.com/cssref/pr_dim_max-width.asp

Na max-width vlastnost určuje maximální šířku prvku.

Pokud je obsah větší, než je maximální šířka, bude to automaticky změnit výšku prvku.

Je-li obsah je menší než maximální šířku max-width vlastnost nemá žádný vliv.

Poznámka: tím se zabrání hodnotu width majetku z stává větší než max-width. Hodnota max-width vlastnost přepíše na width nemovitosti.

Přijde na vaši otázku teď, pokud jste nahradit max-width s width a zkontrolujte, zda šířka obrazu na bod zlomu >=500px nebo <500px, bude-samozřejmě vzít rodiče v plné šířce.

Ale jak vyplývá z výše uvedené definice, max-width je si jistý prvek šířka nemá jít nad určitou šířku (bez ohledu na to, co je rodič, šířka) a to je důvod, proč tato vlastnost byla uvedena do.

použití by mělo oficiálních zdrojů, jako je W3C či MDN. w3schools je nepřesné.
@Raptor: obdivuji vaši radu, já osobně dávám přednost oficiálních zdrojů. Nicméně MDN nebo W3C je stále ještě není to špatné pro začátečníky. Všichni jsme se začali z těchto stránek a s časem, když jsme si všimli, w3c má několik otázek, v některých případech, ale pro začátečníka pochopit pravdu, nemám pocit, že je špatné se podělit :) Každopádně Díky

CSS img max-width: 100%

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii