Как сохранить соотношение сторон между 16: 9 и 4: 3, используя CSS? - PullRequest
Новая
       22

Как сохранить соотношение сторон между 16: 9 и 4: 3, используя CSS?

0 голосов
/ 26 апреля 2018

Цель состоит в том, чтобы визуализировать объект без почтового ящика, если соотношение сторон находится в заданных пределах, например от 16: 9 до 4: 3.

Например, когда доступная ширина 16: Изображение 9 уменьшается ниже 16: 9, мы хотим обрезать левую и правую стороны изображения.Если ширина будет уменьшена ниже 4: 3, мы хотим сохранить это соотношение и начать уменьшать.

В этом примере вы можете видеть, как масштабируется объект.Проблема с этим подходом заключается в том, что масштабирование происходит немедленно, как только доступное пространство становится еще одним пикселем. 

.iframe {
  border: 1px solid black;
  width: 350px;
  height: 350px;
  resize: both;
  overflow: auto;
}

.wrapper {
  background-color: #c05046;
  height: 100%;
  display: flex;
}

.image {
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
<div class="iframe">
  <div class="wrapper">
      <img class="image" src="https://i.ytimg.com/vi/PX-0Nrg4Yhw/maxresdefault.jpg">
  </div>
</div>

[В примерах смоделирован iframe, и вы можете изменить его размер для изменения доступного пространства.]

Трюк с соотношением жидкостейкак объяснено в https://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios может каким-то образом достичь масштабирования между 2 коэффициентами, но имеет несколько недостатков:

  • Он работает с фиксированной высотой и имеет только ширину шкалы, что делает его работу горизонтально, но непо вертикали.
  • Объект не произвольный объект, а background-image, что означает, что этот трюк, вероятно, не будет работать с видео и другими объектами. 

.iframe {
  background-color: #c05046;
  border: 1px solid black;
  width: 350px;
  height: 350px;
  resize: both;
  overflow: auto;
}

.column {
  max-width: 640px;
}

figure.fluidratio {
  margin: 0;
  padding-top: 15%; /* slope */
  height: 240px; /* start height */
  background-image: url(https://i.ytimg.com/vi/PX-0Nrg4Yhw/maxresdefault.jpg);
  background-size: cover;
  -moz-background-size: cover; /* Firefox 3.6 */
  background-position: center; /* Internet Explorer 7/8 */
}
<div class="iframe">
  <div class="column">
    <figure class="fluidratio"></figure>
  </div>
</div>

Я видел, как кто-то предлагал использовать встроенный SVG, но не получил примеры для работы.

Любые отзывы приветствуются.

1 Ответ

0 голосов
/ 28 апреля 2018

Если я правильно понял проблему, вы хотите добиться чего-то вроде этого: 

      .iframe {
        border: 1px solid black;
        width: 100%;
        height: 100%;
      }

      .container {
        width: 100%;
        max-width: 130vh;
        position: relative;
        margin: 0 auto;
      }

      .wrapper {
        background-color: #c05046;
        height: 0;
        padding-top: 75%;
        position: relative;
        width: 75%;
        left: 50%;
        transform: translateX(-50%);
        max-width: 640px;
      }

      .image {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
      }
    <div class="iframe">
      <div class="container">
      <div class="wrapper">
          <img class="image" src="https://i.ytimg.com/vi/PX-0Nrg4Yhw/maxresdefault.jpg">
      </div>
      </div>
    </div>

* изменение размера здесь отключено, пожалуйста, проверьте в полноэкранном режиме с адаптивным режимом.

Использование внутреннего .wrapper, он сохраняет часть с соотношением 4/3 всегда видимой, но позволяет содержимому выходить за его границы.К max-height: 130vh его высота продолжает увеличиваться.Поскольку он не основан на background-image, его можно использовать как с видео, так и с изображением.

Основным недостатком является использование модуля vh, который сохраняет его относительно размера порта просмотра и высоты родительского контейнера.-> см. комментарий

...