如何为小型设备调整引导模式的大小横向和纵向

问题描述

我正在使用 angular 应用程序为移动设备创建仪表板页面我编写了以下用于从纵向到横向的强制方向为此我使用了引导模式

.component.html

<div class="card d-block d-xs-block d-sm-block d-md-none d-lg-none d-xl-none" >
      <h5 class="card-header h5 "  style="background-color: #00B5B8; color: white;">Output stream

        <i class="mdi mdi-fullscreen menu-icon" style="font-size: 25px;float:right;" (click)="openModal(exampleModalContent)"></i>
        
      </h5>
    
      <div class="row" style="background-color: lightgray;margin-left: 1px;" id="hvb">
        <br>
          <div class="col-xs-12 col-sm-8 col-lg-12" >
        
            <span id="imgshow" style="margin-left:-20px;">
              
              <img [src]="imageurl" (error)="onImgError();">
            </span>
            <span id="contentshow" style="width:400px;height:250px;">
             
              <h5 style="padding:125px 75px;border: 1px solid #f8f8f8;text-align: center;color: white;">No Video Feed</h5>
            </span>
           
          </div>
    
               </div>
    
          </div>



<ng-template class="modal fade " #exampleModalContent let-modal>
  <div class="modal-content landscape">
    
    <div class="card" >

      <div class="modal-header" style="background-color: #00B5B8; color: white;">
        <h5 class="modal-title" id="exampleModalLabel" >Output stream</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    
      <div class="row" style="background-color: lightgray;margin-left: 1px;" id="hvb">
        <br>
        <div class="col-xs-12 col-sm-8 col-lg-12" >
        
             <span id="imgshow" style="margin-left:-20px;">
              
              <img [src]="imageurl" (error)="onImgError();">
            </span>
            <span id="contentshow" style="width:400px;height:250px;">
             
              <h5 style="padding:125px 75px;border: 1px solid #f8f8f8;text-align: center;color: white;">No Video Feed</h5>
            </span>

        </div>
            </div>
    
    </div>  
  </div>
</ng-template>

.component.css

@media screen and (min-width: 320px) and (max-width: 767px) and (max-width :990px) and (orientation: portrait) {

    .landscape {

    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 150vw;
    overflow-x: hidden;
    position: fixed;
    top: 100%;
    left: 0;
  }
  }

我已经使用模态在小型设备中从纵向模式强制定向到横向模式。

输出仅显示模态内视频的一半（即北、东），其他部分移动到模态外。

但我只想用模态显示所有部分。

我是新手，任何人都可以帮我解决这个问题

解决方法

您将设置高度 = 视图宽度的 150%（高度：150vw;）

尝试设置ma​​x-width和ma​​x-height参数来限制块的大小；