Максимальная ширина CSS img: 100%

Question 1

Если мы зададим максимальную ширину: 100% для элемента изображения (например, изображение размером 250 пикселей * 500 пикселей) и поместим это изображение внутри родительского элемента шириной 1000 пикселей, то, если родительский элемент уменьшен Однако, если родительская ширина составляет > 500 пикселей, изображение будет увеличено не на 500 пикселей, а на исходное значение.

Что меня смущает, так это значение 100% здесь. Насколько я понимаю, относительный процент всегда относится к его родителю. Так не означает ли это, что максимальная ширина всегда равна текущей ширине ее родителя? Таким образом, изображение всегда будет уменьшаться/масштабироваться в соответствии с его родителями, потому что максимальная ширина составляет 100%? Что я здесь неправильно понимаю? как понять относительный процент, используемый в максимальной ширине в этом случае? С чем это связано?Спасибо!

Question 2

Да, есть разница между width и max-width.

Это определение из w3school облегчит вам понимание.

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

То max-width свойство определяет максимальную ширину элемента.

Если содержимое превышает максимальную ширину, оно автоматически изменит высоту элемента.

Если содержимое меньше максимальной ширины, свойство max-width не влияет.

Примечание: Это предотвращает значение width собственность от того, чтобы стать больше, чем max-width. Значение max-width свойство переопределяет width собственность.

Возвращаясь к вашему вопросу сейчас, если вы замените max-width с width и проверьте ширину вашего изображения на наличие точки останова >=500 пикселей или >

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

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

Да, есть разница между width и max-width.

Это определение из w3school облегчит вам понимание.

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

То max-width свойство определяет максимальную ширину элемента.

Если содержимое превышает максимальную ширину, оно автоматически изменит высоту элемента.

Если содержимое меньше максимальной ширины, свойство max-width не влияет.

Примечание: Это предотвращает значение width собственность от того, чтобы стать больше, чем max-width. Значение max-width свойство переопределяет width собственность.

Возвращаясь к вашему вопросу сейчас, если вы замените max-width с width и проверьте ширину вашего изображения на наличие точки останова >=500 пикселей или >

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

вместо этого вы используете официальные источники, такие как W3C или MDN. w3schools является неточным.
@Raptor: Я восхищаюсь вашими советами, я сам предпочитаю официальные источники. Однако MDN или W3C все еще не так уж плохи для начинающих. Мы все начинали с этих сайтов, и со временем, хотя мы заметили, что в некоторых случаях у w3c есть несколько проблем, но для новичка, чтобы понять суть, я не считаю, что плохо делиться :) В любом Случае, Спасибо

Максимальная ширина CSS img: 100%

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории