0

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

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

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

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

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

4

1 回答 1

0

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

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

于 2020-12-22T08:59:17.087 回答