CSS img max-width: 100%

Question 1

Ak chceme zadať max-width: 100% obrázok prvku (napríklad obraz 250px * 500px) a dali sme tento obraz vo vnútri materskej prvok šírka 1000px, potom, ak rodič je zmenšiť <= 500px, obrázok bude možné zmenšiť preto obsadiť celú dĺžku materskej. Ak sa však rodič šírka je na > 500px, obraz nebude rozšírili ale v jeho pôvodnej 500px.

Čo mate mňa znamená 100% tu. Z môjho chápania, relatívne percento je vždy s ohľadom na jeho rodič. Takže nie je to znamenalo, že maximálna šírka je vždy aktuálnu šírku jeho rodič? Takže obrázok bude vždy možné zmenšiť/rozšírili, aby sa zmestili jeho rodičia, pretože maximálna šírka je 100%? Čo som nedorozumenia tu? ako chápať relatívne percento použité v max-šírka v tomto prípade? Čo je to relatívne? Vďaka!

Question 2

Áno, tam je rozdiel medzi width a max-width.

Táto definícia z w3school bude to pre vás ľahké pochopiť.

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

Na max-width vlastnosť definuje maximálna šírka prvku.

Ak obsah je väčšia ako maximálna šírka, bude automaticky zmenu výšky prvku.

Ak obsah je menší ako maximálna šírka maximálna šírka nehnuteľnosť nemá žiadny vplyv.

Poznámka: Táto funkcia zabráni hodnota width majetok stal väčší ako max-width. Hodnota max-width majetku prepíše na width majetku.

Príchod na svoju otázku teraz, ak nahradíte max-width s width a skontrolujte šírku obrazu na zlom >=500px alebo <500px, bude-samozrejme sa rodičia plnej šírke.

Ale ako je uvedené vyššie definícia, max-width robí, či prvok šírka neprekračuje nad určitú šírka (bez ohľadu na to, aký je rodič šírka) a to je dôvod, prečo táto vlastnosť bola uvedená do.

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

Áno, tam je rozdiel medzi width a max-width.

Táto definícia z w3school bude to pre vás ľahké pochopiť.

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

Na max-width vlastnosť definuje maximálna šírka prvku.

Ak obsah je väčšia ako maximálna šírka, bude automaticky zmenu výšky prvku.

Ak obsah je menší ako maximálna šírka maximálna šírka nehnuteľnosť nemá žiadny vplyv.

Poznámka: Táto funkcia zabráni hodnota width majetok stal väčší ako max-width. Hodnota max-width majetku prepíše na width majetku.

Príchod na svoju otázku teraz, ak nahradíte max-width s width a skontrolujte šírku obrazu na zlom >=500px alebo <500px, bude-samozrejme sa rodičia plnej šírke.

Ale ako je uvedené vyššie definícia, max-width robí, či prvok šírka neprekračuje nad určitú šírka (bez ohľadu na to, aký je rodič šírka) a to je dôvod, prečo táto vlastnosť bola uvedená do.

môžete použiť by oficiálnych zdrojov namiesto toho, ako W3C alebo MDN. w3schools je nepresné.
@Raptor: obdivujem vašu poradiť, ja sám som radšej oficiálnych zdrojov. Avšak MDN alebo W3C stále nie je zlé pre začiatočníkov. Všetci sme začali z týchto stránok a s postupom času, keď sme si všimli, w3c má niekoľko problémov, v niektorých prípadoch, ale pre začiatočníkov pochopiť bod, nemám pocit, že je zlé, ak chcete zdieľať :) Každopádne, Vďaka

CSS img max-width: 100%

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii