Отключить перенос для iframe

Question

Я хочу/нужно создать панель инструментов, которая показывает четыре разных экрана. До сих пор я пытался решить эту проблему, просто включив «дисплеи» для каждого фрейма:

<style>
    iframe {
        width: 1920px;
        height: 1080px;
        display: inline;
        vertical-align: top;        
    }
</style>


<iframe src="display1" ></iframe>
<iframe src="display2" ></iframe>
<iframe src="display3"></iframe>
<iframe src="display4"></iframe>

Теперь у меня проблема, что окно браузера всегда размещает окна вертикально, потому что они слишком велики. Я хочу, чтобы они были в формате 2x2. Как я могу понять, что он помещает два кадра рядом друг с другом, а не перемещает их так, чтобы они соответствовали друг другу.

Я уже пробовал разные варианты, но ни один из них не работает.

Любая помощь будет оценена

html css

0

milk 4 Фев 2022 в 09:25

Answer 1

Вы можете поместить фреймы в сетку 2x2.

Однако важно убедиться, что соотношение сторон остается таким же, как у оригинала.

Этот фрагмент обеспечивает это, используя соотношение сторон свойства CSS, используя исходные размеры iframe для установки этого.

.container {
  width: 50vw;
  /* set just for this demo make it what you want */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2vw;
}

iframe {
  aspect-ratio: 1920 / 1080;
  width: 100%;
}

<div class="container">

  <iframe src="display1"></iframe>
  <iframe src="display2"></iframe>
  <iframe src="display3"></iframe>
  <iframe src="display4"></iframe>
</div>

0

A Haworth 4 Фев 2022 в 09:46

Большое спасибо за это. С некоторыми корректировками я смог получить именно тот результат, который мне был нужен!

–

milk

4 Фев 2022 в 10:26

Answer 2

Вы можете поместить свои фреймы в сетку / flex для достижения решения.

0

Abdullah Tariq 4 Фев 2022 в 09:33

Отключить перенос для iframe

2 ответа

Новые вопросы

html