it-swarm.com.ru

Как установить максимальную ширину в процентах и ​​пикселях?

Как я могу предотвратить расширение ширины div за процент И пиксель? Другими словами, браузер должен вычислить значение пикселя в процентах, а затем выбрать меньшее из двух значений.

Если бы я установил их обоих так: {max-width:100px;max-width:20%;} конвейер ресурсов просто выбрал бы второй и проигнорировал первый.

32
Joe Morano
width:20%;
max-width:100px;

Это устанавливает ширину на 20%, но ограничивает ее на 100 пикселей.

33
JJJ

Один из способов сделать это - просто использовать два div

<div class="outer">
  <div class="inner">
    This content will not exceed 100px or 20% width.
  </div>
</div>

<style>
.outer {
  max-width: 90%;
}
.inner {
  max-width: 100px;
}
</style>
18
Jason Axelson

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

Практический пример: у вас есть 5 фотографий с вашего телефона, которые нужно разместить на странице, и вам нужно немного текста, чтобы быть на другой половине экрана. Вы уменьшаете размер изображений до 500 пикселей в ширину и 300 пикселей в высоту. Вы хотите, чтобы они не превышали половину экрана и не были шире, чем 250 пикселей на планшете. Рассчитайте максимальную высоту: 250 * 300/500 = 150 пикселей.

.img-class {
    max-width: 50%;
}
@media (max-width: 800px) {
    .img-class {
       max-height: 150px;
    }
}

Протестировано на последних версиях Chrome, Firefox и IE.

7
Kiaurutis

У меня была конкретная проблема, которая требовала аналогичного решения. Мне нужно было отобразить все изображения (независимо от соотношения сторон, положения или дополнительной разметки HTML) в их исходном размере, вплоть до установленной максимальной ширины в пикселях. Если экран меньше этого фиксированного размера, он должен сжаться, чтобы соответствовать. То есть установка width не будет удовлетворять требованиям.

Чтобы расширить ответ @Kiaurutis:

img {
  max-width: 400px;
}

@media (max-width: 400px) {
  img {
    max-width: 100%;
  }
}

Рабочий пример можно посмотреть здесь: https://jsfiddle.net/vrehxmpx/ . В этом примере есть изображение размером более 400 пикселей (всегда уменьшенное) и изображение меньше порогового значения (только уменьшенное, когда экран меньше изображения).

Чтобы настроить поля, границы и другие элементы, которые могут быть на изображении, просто увеличьте @media's max-width.

2
Druckles

Не делай этого.

Я считаю, что выбранный ответ является правильным для сценария, который описывает ОП. Однако в некоторых комментариях утверждается, что OP попросил установить для свойства max-width меньшее из двух значений, а не width. Это также можно сделать, см. Ниже.

Примечание: Это решение не имеет большого смысла для меня. Пожалуйста, используйте выбранный ответ, он правильно показывает, для чего была сделана максимальная ширина. Приведенный ниже код гарантирует, что свойство max-width будет меньше 20% или 100px.

img {
    max-width: 20%;
}

@media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
    img {
        max-width: 100px;
    }
}
0
Aaron Cicali

У меня была такая же ширина "обтекания страниц" на моем сайте. Я хотел, чтобы он был шириной 95% по умолчанию, но не более 1280 пикселей. вот как я сделал это с помощью CSS

.wrap{max-width:95%;margin:0px auto;}
@media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}
0
Ph Abd