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

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

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

Ответ 1

width:20%;
max-width:100px;

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

Ответ 2

Один из способов добиться этого - просто использовать два 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>

Ответ 3

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

Практический пример. У вас есть 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.

Ответ 4

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

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

img {
  max-width: 400px;
}

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

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

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