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

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

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

30
asset-pipeline css css3 html

5 ответов

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

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

30

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

<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>
15

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

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

.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/. В этом примере есть изображение больше 400px (всегда уменьшенное) и изображение меньше порога (только уменьшенное, когда экран меньше изображения).

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

2

У меня была такая же ширина "обертки страницы" на моем сайте. Я хотел, чтобы он был шириной 95% по умолчанию, но не более 1280px. вот как я сделал это с 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