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

Question

我正在使用 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;
  }
  }

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

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

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

我是新手，谁能帮我解决这个问题

Answer 1

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

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