Maksymalna szerokość CSS img: 100%

Question 1

Jeśli zadamy maksymalną szerokość: 100% dla elementu obrazu (na przykład obraz o wymiarach 250 pikseli * 500 pikseli) i umieścimy to obraz wewnątrz elementu nadrzędnego o szerokości 1000 pikseli, to, jeśli element nadrzędny zmniejszono Jednak, jeśli nadrzędny szerokość wynosi > 500 pikseli, obraz zostanie powiększony na 500 pikseli, a na pierwotną wartość.

Co mnie zastanawia, to wartość 100% jest tutaj. Jak rozumiem, względny procent zawsze odnosi się do jego rodzica. Tak nie czy to oznacza, że maksymalna szerokość jest zawsze równa bieżącej szerokości, jej rodzice? Tak więc, obraz zawsze będzie się zmniejszać/skali zgodnie z jego rodzicami, bo maksymalna szerokość wynosi 100%? Co ja tu źle rozumiem? jak zrozumieć względny procent, używany w maksymalnej szerokości w tym przypadku? Z czym to jest związane?Dziękuję!

Question 2

Tak, jest różnica między width i max-width.

To definicja z w3school ułatwi ci zrozumienie.

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

To max-width właściwość określa maksymalną szerokość elementu.

Jeżeli zawartość przekracza maksymalną szerokość, to automatycznie zmieni się wysokość elementu.

Jeśli zawartość jest mniejsza niż maksymalna szerokość, właściwość max-width nie wpływa.

Uwaga: To zapobiega wartość width własność od tego, aby stać się więcej niż max-width. Wartość max-width właściwość zastępuje width własność.

Wracając do twojego pytania teraz, jeśli wymienić max-width z width i sprawdź szerokość obrazu pod kątem punkty przerwania >=500 pikseli lub >

Ale, jak już wspomniano z powyższej definicji, max-width upewnij się, że szerokość elementu nie przekracza określonej szerokości (niezależnie od tego, jaka jest nadrzędna szerokość), i dlatego ta właściwość została wprowadzona.

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

Tak, jest różnica między width i max-width.

To definicja z w3school ułatwi ci zrozumienie.

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

To max-width właściwość określa maksymalną szerokość elementu.

Jeżeli zawartość przekracza maksymalną szerokość, to automatycznie zmieni się wysokość elementu.

Jeśli zawartość jest mniejsza niż maksymalna szerokość, właściwość max-width nie wpływa.

Uwaga: To zapobiega wartość width własność od tego, aby stać się więcej niż max-width. Wartość max-width właściwość zastępuje width własność.

Wracając do twojego pytania teraz, jeśli wymienić max-width z width i sprawdź szerokość obrazu pod kątem punkty przerwania >=500 pikseli lub >

Ale, jak już wspomniano z powyższej definicji, max-width upewnij się, że szerokość elementu nie przekracza określonej szerokości (niezależnie od tego, jaka jest nadrzędna szerokość), i dlatego ta właściwość została wprowadzona.

zamiast tego używasz oficjalne źródła, takie jak W3C lub MDN. w3schools jest niedokładne.
@Raptor: podziwiam twoje porady, ja sam wolę oficjalne źródła. Jednak MDN lub W3C jeszcze nie jest tak źle dla początkujących. Wszyscy zaczynali z tych stron, i z czasem, choć zauważyliśmy, że w niektórych przypadkach w3c jest kilka problemów, ale dla początkujących, aby zrozumieć, ja nie uważam, że źle się dzielić :) W każdym Razie, Dziękuję

Maksymalna szerokość CSS img: 100%

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii