Почему max-width и width разное отображение?
Есть код
<div class="container"> <aside class="siberbar"> <img src="img/foto1.jpg" class="photo" alt="Фото класcного парня"> <!--Contacts--> <div class="contacts"> <h3 class="sidebar-title">Контакты</h3> <!--дальше контент--> </div> </aside> </div> |
<div class="container"> <aside class="siberbar"> <img src="img/foto1.jpg" class="photo" alt="Фото класcного парня"> <!--Contacts--> <div class="contacts"> <h3 class="sidebar-title">Контакты</h3> <!--дальше контент--> </div> </aside> </div>
В CSS:
html { box-sizing: border-box; } .container{ padding-left: 15px; padding-right: 15px; margin: auto; width: 1230px; } .siberbar { max-width: 370px; } img { display: block; max-width: 100%; height: auto; } |
html { box-sizing: border-box; } .container{ padding-left: 15px; padding-right: 15px; margin: auto; width: 1230px; } .siberbar { max-width: 370px; } img { display: block; max-width: 100%; height: auto; }
- всё нормально отображается, размеры соблюдаются. Но если по мимо этих стилей добавить стиль к самой картинке
.photo { width: 370px;} |
.photo { width: 370px;}
- тогда размер родителя (aside) и самой картинки уменьшается до 318px.
Если изменить
.photo { max-width: 370px;} |
.photo { max-width: 370px;}
- отображается правильно, размеры соблюдаются.
Помогите разобраться с max-width и width
Дополнительно:
в предоставленном фрагменте когда такого не будет. значит что-то другое ломает. залей код в песочницу и воспроизведи проблему
Наверное, вы хотели задать его для *
Или где-то в коде есть inherit, но вы решили не показывать его нам.
В любом случае этих стилей мало, наверняка у родителя есть флекс или грид или что-то там ещё.
Сделайте песочницу на codepen.io с видимой проблемой.
Ответы:
потому что у вас сайдбар резиновый. Задано условие max-width: 370px; Т.е. он подстраивается под внутренние размеры. Всё хорошо если у картинки max-width: 370px;, т.е. у неё фактически не 370px. Если задать фиксированную длину фото то сайдбар подстроится под неё. А вот почему размер уменьшается это вам надо внимательно посмотреть все стили. Может быть у фото фактический размер 318px. Проверьте, задано ли свойство дисплей всем участникам этого шоу. В первую очередь фото. Посмотрите так же не указано где-либо свойство display: flex, если да, то замените на block. Этот flex очень коварный. С одной стороны он делает что-то хорошее, а с другой, изменить это что-то хорошее невозможно или очень трудно, можно, но тогда прийдётся всё ломать. А если смысл в этой ломке? Короче этот flex большая морока. Внимательно проверьте все стили, если очень надо то покопайтесь и в js. Может где-то какое-то ограничение на фотку стоит. Та не может, а стоит, не обязательно в скрипте, может в стилях. Иногда стили не отображаются, например img:hover или :focus. Эти hover или :focus в большинстве случаев не видны, в DevTools редко показываются. Стоит где-нибудь img:focus и никаким образом ты это не увидишь. Попробуйте принудительно сказать что фото width: 370px;
.photo { width: 370px !important; } |
.photo { width: 370px !important; }
Так же для проверки можете !important прописать всем тегам, принимающим участие в шоу. И не понятно, зачем фотке задавать размер в px. У вас я вижу и контейнеру задано width: 1230px; Как вы с такими размерами собираетесь делать адаптивную вёрстку? Никак. Чтобы всё было подогнано под размеры экрана надо первоначально задать в %. Или в px до определённого размера экрана, чтоб меньше морочиться с адаптацией. У контейнера длинна width: 100%; У фотки допустим 20%, или мах-width: 20%. То же самое и с сайдбаром. мах-width: 20%. Хотя обычно сайдбар имеет width: 20%. Зачем сайдбару подстраиваться под содержание. Посмотрите может где-то задано padding, не обязательно фотке, участникам тоже. padding, margin, min-width, где-нибудь before или after, проверьте их тоже на вшивость. text-align: justify; При justify получаются нерегулируемые отступы. Свойство float, может где-то что необтекается. Или наоборот наезжает. box-shadow. Обязательно обратите внимание position. Хотя здесь может быть и не влияет. line-height, transform, font-size, font-weight, чрезмерная или наоборот жирность увеличивает или уменьшает объекты, font-family, vertical-align, может задано vertical-align и параметр в px или в %, em, и т.д. Например vertical-align: 5px. Может у картинки бордер стоит. надо фотку помещать в блок, не обязательно div, можно p, span и пр., чтоб размер задавать не фотке а блоку, а фотке сделать 100%. Может задано свойство clip, которое обрезает фотку, transition. Может стоит медиа запрос, типа media screen and (max-width: 900px), что мол при таком-то размере экрана фотка или участник шоу имеет другой размер, text-decoration, animation, text-transform, list-style-type, может задано disc или circle, где-то. white-space, word-wrap. Короче ищите. Для начала укажите всем участникам !important, в первую очередь картинке. Если задано display: block укажите display: inline-block, или наоборот. И обязательно, у картинки должно присутствовать свойство display.
- Спасибо за развернутый ответ
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, с которой вы столкнулись, связана с тем, что свойства CSS max-width и width могут влиять на отображение элементов на веб-странице по-разному, особенно при работе с изображениями или другими элементами, которым нужно задать ширину.
Свойство width устанавливает фиксированную ширину элемента, в то время как свойство max-width устанавливает максимальную ширину элемента. Если элементу установлена фиксированная ширина с помощью свойства width, то он будет иметь точно такую ширину, какую вы указали, независимо от размера экрана или контейнера.
С другой стороны, если вы используете свойство max-width, элемент будет иметь ширину, равную указанной, только если он меньше этого значения. Если же элемент шире, чем max-width, то он будет уменьшен до указанной максимальной ширины.
Поэтому, если у вас возникают проблемы с отображением элементов на вашем сайте из-за различия в поведении свойств max-width и width, вам стоит внимательно проверить, какие значения установлены для этих свойств в вашем CSS. Возможно, вам нужно пересмотреть свои стили и выбрать подходящий способ управления шириной элементов в зависимости от конкретных требований вашего дизайна.
Приведу пример использования свойств max-width и width на примере PHP:
<div style="max-width: 100%;width: 50%"> <img src="example.jpg" alt="Example Image"> </div>
В этом примере у div установлена максимальная ширина 100% и фиксированная ширина в 50%. Это означает, что изображение будет занимать половину ширины своего контейнера, но не более 100% ширины экрана.
Надеюсь, это объяснение поможет вам разобраться в разнице между max-width и width и решить проблему с отображением элементов на вашем сайте. Если у вас остались дополнительные вопросы, не стесняйтесь задавать их.