Блог

Главная - Вопросы по программированию - Соотношение сторон CSS не работает должным образом в Firefox

Соотношение сторон CSS не работает должным образом в Firefox

#css #firefox #aspect-ratio

#css #firefox #соотношение сторон

Вопрос:

Я создал простой div со свойством соотношения сторон, установленным как дочерний элемент другого div. Внутренний div должен заполнять все возможное пространство (но при этом соблюдать переданное соотношение сторон).

Он работает, как и ожидалось, в браузерах на основе chromium, но в Firefox кажется, что он игнорирует соотношение сторон, когда установлено значение width: 100%, а внутренний div растягивается.

 .box {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border: 2px dashed black;
  background-color: lightblue;
}

.container {
  height: 50vh;
} 
 <div class="container">
  <div class="box">
    Sample content
  </div>
</div>

Комментарии:

1. Почему вы устанавливаете ширину на 100%, если вы не хотите, чтобы она была шириной 100%?

2. @xdumaine я хочу, чтобы оно было шириной 100%, пока не будет достигнута максимальная высота.

Ответ №1:

это aspect-ratio слабое объявление, поэтому то, что вы получаете в Firefox, можно считать правильным, потому что элемент соблюдает width и max-height предшествует aspect-ratio . Я бы даже сказал, что поведение Chrome является неправильным.

Стоит отметить, что aspect-ratio только установите предпочтительное соотношение сторон ref, чтобы обеспечить аналогичное поведение элементу изображения, который имеет внутреннее соотношение сторон. Это никогда не предназначалось для принудительного изменения соотношения элементов.

Используйте изображение в вашем примере, и вы получите тот же результат, что и в Firefox

 .box {
  width: 100%;
  max-height: 100%;
  /*aspect-ratio: 1 / 1;*/
}

.container {
  height: 50vh;
} 
 <div class="container">
  <img src="https://picsum.photos/id/237/300/300" class="box">
</div>

Приведенное выше даст вам растянутое изображение, которое подтверждает правильное поведение Firefox

Ответ №2:

Использование max-width: 100% вместо этого отлично работает для меня в Chrome и firefox:

 .box {
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  border: 2px dashed black;
  background-color: lightblue;
}

.container {
  height: 50vh;
} 
 <div class="container">
  <div class="box">
    Sample content
  </div>
</div>

Метки: