Почему min-width и max-width не работает с float?
Вот пример: jsbin.com. Хотелось бы реализовать min и max width для того, чтобы не оставалось «дыры» при уменьшении браузера. Возможно ли такое вообще? Может быть есть другой способ?
P.S.: Проценты и flexbox не подходят.
- Вопрос задан более трёх лет назад
- 3508 просмотров
На самом деле работают эти свойства.
Но float`нутые блоки сжимаются до своего содержимого. Если ширина содержимого у вас будет менее min-width, то ширина блока станет равной min-width. Если ширина содержимого будет более max-width, то ширина блока также станет равной max-width. В остальных случаях ширина блока будет равной ширине содержимого.
UPD:
Вот, я накидал примерчик. По-моему, похоже на то, что вам нужно
jsfiddle.net/DelphinPRO/hm3ewt1d/
UPD2:
Или может быть так, если ширина у блоков должна быть постоянной.
jsfiddle.net/DelphinPRO/hm3ewt1d/1/
По количеству блоков на ум приходит только нагенерить кучу стилей 🙂
@for $i from 2 through $maxColumns <
$columnBreakpoint: $minWidthColumn * $i + 40; // 40 — это расстояние меж блоков.
media (min-width: $сolumnBreakpoint) <
.box <
width: percentage(1/$i);
>
>
>
Источник
Hi-Tech → CSS Max-Width и глюки IE. Хаки для Internet Explorer
CSS свойство max-width — отличное средство, если вы не хотите, чтобы элемент был больше заданного размера. Применение этого свойства к картинкам очень удобно. Конечно, зачастую лучше специально подготавливать изображения для публикации в сети Интернет, однако это не всегда удобно и не всегда возможно.
Синтакцис для использования max-width таков:
Например, если вы хотите, чтобы все изображения в блоке с id wrapper были максимум 400 пикселов по ширине, вы можете прописать в таблице стилей что-то вроде этого:
Естесственно, вы можете выставлять значение max-width любым. Также это значение можно указывать и в процентах, например для «резиновых» сайтов (ширина которых зависит от разрешения экрана):
В этом случае ширина изображений не превысит 95% от имеющегося места (Обычно желательно не занимать изображением 100% экрана, а оставлять небольшие отступы).
Но. Не всё так просто как кажется, и виной тому старый добрый Internet Explorer. Всё дело в том, что все версии браузера вплоть до 7 (включительно) не поддерживают это css-свойство. (Не берусь говорить за 8 версию — даже не пробовал) — прим. ред.
А так уж сложилось, что этим браузером бользуется львиная доля всех посетителей сайта.
Но выход есть. И выход — в возможности обработки javascript в css, встроенной в IE.
Вот простой синтаксис использования такого условия:
selector
Я не буду рассказывать все варианты использования expression в css для IE, но, поверьте, вариантов использования масса. Я лишь покажу вам как заставить IE уменьшать изображения до заданного размера, если исходный размер (ширина) больше чем нам необходим.
.wrapper img <
max-width:400px;
width: expression(this.width > 400 ? 400: true);
>
К сожалению, мне не удалось найти способа использовать этот метод для обозначения максимальной ширины изображения в процентах. Однако с пикселями всё работает корректно. Браузеры, отличные от IE, спокойно игнорируют условие width:expression, обрабатывая только max-width. Что, собственно, нам и нужно.
Источник
Из за чего картинка не обращает внимания на max-width?
Картинка лежит в блоке, ширина которого задается в %.
Ставлю картинке width:100% и все нормально.
А если за место четкой ширины ставлю max-width:100% то картинка просто не обращает внимания — растягивается как хочет, по своей истинной ширине.
В FF проверяю, если что. В хроме все нормально.
- Вопрос задан более трёх лет назад
- 494 просмотра
Заменить max-width: 150px; и min-width: 150px; на
table-cell это ячейка таблицы и на неё не действует max/min-width и плюс max/min-width с одинаковым значением это все равно что width 150
и это тоже не нужно
Потому что — это inline элемент. Т.е. его ширина в процентах берется от его истинной ширины и влияет только на ширину элемента, а не на ширину блока-контейнера.
Если вы хотите адаптивный дизайн — забудьте о теге img. Используете свойство css background.
пример
Андрей Федоров:
В article ложится картинка — она может быть и маленькой и большой. Если она меньше .one по ширине, то ее размер должен быть каким он есть. Если больше — то размером с сам .one.
Я не знаю что тут скринить.
> У меня и ff и в хроме одинаково ведет себя ваш пример из вопроса при изменении размеров вьюпорта
Так вы замените width на max-width и все поймете.
Источник
Как сделать изображения адаптивными с помощью CSS
Большинство сегодняшних сайтов адаптивны. А если в нём нужно центрировать и выровнять изображение, необходимо научиться делать изображения плавными или адаптивными с помощью CSS.
Пару недель назад я опубликовал обучающее видео, в котором объяснил, как сделать адаптивный веб-сайт. В видео мы сделали изображение адаптивным. В этом посте я хотел бы рассказать об этом подробнее.
Также вы узнаете некоторые общие проблемы, которые могут возникнуть при попытке сделать изображения адаптивными. Я постараюсь объяснить, как их решить.
Сделать изображение гибким или отзывчивым на самом деле довольно просто. Когда вы загружаете изображение на веб-сайт, оно имеет ширину и высоту по умолчанию. Вы можете изменить их с помощью CSS.
Чтобы изображение было отзывчивым, нужно присвоить новое значение его свойству width. Тогда высота изображения автоматически изменится.
Важно знать, что вы всегда должны использовать относительные единицы для свойства ширины, такие как процент, а не абсолютные единицы, такие как пиксели.
Например, если вы определите фиксированную ширину 500 пикселей, ваше изображение не будет отзывчивым, потому что единица измерения абсолютная.
Вот почему вам следует вместо этого назначить относительную единицу, например 50%. Такой подход сделает ваши изображения плавными, и они смогут изменять свой размер независимо от размера экрана.
Один из вопросов, который мне задают чаще всего, — следует ли использовать медиа-запросы.
Медиа-запрос — еще одна важная функция CSS, которая помогает сделать веб-сайт адаптивным. Я не буду вдаваться в подробности, но вы можете прочитать другой мой пост позже, чтобы узнать, как использовать медиа-запросы более подробно.
Ответ на этот вопрос: «это зависит от обстоятельств». Если хотите, чтобы изображение имело разные размеры от одного устройства к другому, нужно будет использовать медиа-запросы. В противном случае вы этого не сделаете.
Теперь для этого примера ваше изображение имеет ширину 50% для любого экрана. Но если вы хотите сделать его полноразмерным для мобильных устройств, понадобится помощь медиа-запросов:
Таким образом, в соответствии с правилом медиа-запроса любое устройство размером менее 480 пикселей будет занимать всю ширину экрана.
Другой способ, которым разработчики могут создавать адаптивные изображения, — это свойство max-width. Однако это не всегда лучший метод, поскольку он может работать не для всех размеров экрана и устройств.
Прежде чем перейти к примеру, необходимо понять, что именно делает свойство max-width.
Свойство max-width устанавливает максимальную ширину для элемента, которая не позволяет ширине этого элемента быть больше, чем его значение max-width (но может быть меньше).
Например, если изображение имеет ширину по умолчанию 500 пикселей, а размер вашего экрана всего 360 пикселей, вы не сможете увидеть полное изображение, потому что недостаточно места:
Поэтому вы можете определить свойство max-width для изображения и установить его на 100%, что сжимает изображение с 500 до 360 пикселей. Таким образом, вы сможете увидеть полное изображение на экране меньшего размера.
Хорошо то, что, поскольку вы используете относительные единицы, изображение будет плавным на любом устройстве размером менее 500 пикселей.
К сожалению, размер экрана будет несколько больше 500 пикселей, но изображение не изменится, поскольку его ширина по умолчанию составляет 500 пикселей. Такой подход нарушит отзывчивость изображения.
Чтобы исправить это, вам нужно снова использовать свойство width, что делает бесполезным свойство max-width.
Другая распространенная проблема, с которой вы можете столкнуться, связана со свойством высоты. Обычно высота изображения автоматически изменяется, поэтому вам не нужно назначать свойство высоты вашим изображениям (потому что это как бы ломает изображение).
Но в некоторых случаях вам, возможно, придется работать с изображениями, которые должны иметь фиксированную высоту. Поэтому, когда вы назначаете фиксированную высоту изображения, оно все равно будет отзывчивым, но не будет хорошо выглядеть.
Источник
Заставить работать min-width,max-width в %
Адаптация дизайна.Свойства min-width и max-width
Всем привет.Возникла проблема в понимании свойств min-width и max-width.Если использовать в @media.
Адаптивная вёрстка, min-width или max-width?
В bootstrap 3 применяется сетка на основе media queries, а именно @media (min-width), НО. .
min-width max-width
Помогите разобраться. Резиновый сайт с минимальной и максимальной шириной сайта. При просмотре.
min-width/max-width не применим к таблицам, ибо те растягиваюся по своим правилам!
Поясни, зачем могло именно min-width понадобиться в процентах? И чем просто width не устраивает?
| inherit
Начальное: зависит от ПА
Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
| none | inherit
Начальное: none
Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
Наследуется: нет
Процентное: относительно ширины содержащего блока
Носитель: визуальный
Эти два свойства позволяют авторам ограничить ширину бокса определёнными рамками.
Значения имеют следующий смысл:
Специфицирует фиксированную минимальную и максимальную вычисленную ширину.
Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно ширины содержащего блока генерируемого бокса.
none
(Только для ‘max-width’) Нет ограничений на ширину бокса.
Следующий алгоритм описывает, как эти два свойства воздействуют на вычисленное значение свойства ‘width’:
Ширина вычисляется (без ‘min-width’ и ‘max-width’) по вышеприведённым правилам «Вычисление ширины и полей».
Если вычисленное значение ‘min-width’ больше, чем значение ‘max-width’, то ‘max-width’ устанавливается в значение ‘min-width’.
Если вычисленная ширина больше, чем ‘max-width’, вышеприведённые правила применяются вновь, но на этот раз с использованием значения ‘max-width’ как специфицированного для ‘width’.
Если вычисленная ширина меньше, чем ‘min-width’, вышеприведённые правила применяются вновь, но на этот раз с использованием значения ‘min-width’ как специфицированного для ‘width’.
ПА может определить неотрицательное минимальное значение для свойства ‘min-width’, которое (значение) может варьироваться от элемента к элементу и даже зависеть от других свойств. Если ‘min-width’ выходит за нижнюю границу этого лимита из-за того, что было установлено явно, или из-за того, что оно ‘auto’ и вышеприведённые правила сделают его слишком маленьким, ПА может использовать минимальное значение как вычисленное значение.
10.7 Минимальная и максимальная высота: ‘min-height’ и ‘max-height’
Иногда необходимо ограничить высоту элементов определёнными рамками. Два свойства выполняют эту функцию:
| inherit
Начальное: 0
Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы
Наследуется: нет
Процентное: относительно высоты содержащего блока
Носитель: визуальный
| none | inherit
Начальное: none
Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы
Наследуется: нет
Процентное: относительно высоты содержащего блока
Носитель: визуальный
Эти два свойства позволяют авторам ограничить высоту боксов определённым диапазоном. Значения имеют следующий смысл:
Специфицирует фиксированный минимум и максимум вычисленной высоты.
Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентные значения интерпретируются так же, как ‘auto’.
none
(Только для ‘max-height’) Высота бокса не ограничена.
Следующий алгоритм описывает, как эти два свойства вводят вычисленное значение свойства ‘height’:
Высота вычисляется (без ‘min-height’ и ‘max-height’) по вышеприведённым правилам в «Вычислении высоты и полей».
Если вычисленное значение ‘min-height’ больше значения ‘max-height’, ‘max-height’ устанавливается в значение ‘min-height’.
Если вычисленная высота больше, чем ‘max-height’, вновь применяются вышеприведённые правила, но на этот раз с использованием значения ‘max-height’ как специфицированного значения для ‘height’.
Если вычисленная высота меньше, чем ‘min-height’, вновь применяются вышеприведённые правила, но на этот раз с использованием значения ‘min-height’ как специфицированного значения для ‘height’.
Источник
