Почему мы включаем объявления как ширины, так и максимальной ширины в CSS?

Question

Есть ли разница между объявлением width и max-width и объявлением только одного?

Как я понял, использование только свойства max-width приводит к тому, что все содержимое элемента подгоняется динамически при изменении размера области просмотра.

Answer 1

Рассмотрим следующее перо, не стесняйтесь изменять размер окна, чтобы увидеть, что происходит: https://codepen.io/harrison-rood/pen/KKzPQMW

Первый пример - изображение с явной шириной 800 пикселей.

Второй - изображение с максимальной шириной 800 пикселей, но шириной 100%.

Видите, как одно из них реагирует, а другое - нет? В первом примере мы указываем изображению, что оно должно быть ровно 800 пикселей. Во втором примере мы говорим, что изображение должно быть плавным на 100%, но не больше 800 пикселей, несмотря ни на что.

Вы также можете использовать эту идею в обратном порядке. В третьем примере изображение имеет ширину auto (как можно больше), но максимальную ширину 100%, что означает, что оно будет таким же большим, как и контейнер, но не выйдет за его пределы.

Четвертый пример показывает, что произошло бы без максимальной ширины. Видите, как изображение выходит за пределы своего контейнера, потому что оно намного больше?

Надеюсь, это проясняет ситуацию! Если это так, обязательно оставьте свой голос!

Answer 2

Использование max-width, как следует из названия, означает, что, когда контейнер содержит больше содержимого, чем он может вместить, его ширина не будет превышать указанное max-width.

max-width специально используется для предотвращения увеличения ширины контейнера, когда он содержит больше содержимого, чем может поместиться - вместо этого, если указано max-width, содержимое будет выливаться из контейнера.

Answer 3

Это потому, что разрешения экрана могут быть разных размеров. Допустим, у вас есть элемент с шириной 15%, если вы увеличите ширину окна, 15% станет больше в пикселях. Вы можете установить максимальную ширину, чтобы она не превышала определенную ширину в пикселях.