How to resize bootstrap modal for small devices (for landscape and portrait orientations)

Question

I am using angular application created the dashboard page for mobile divices I have written the following for forcible orientation from portrait to landscape for this I have used bootstrap modal

.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;
  }
  }

I have used the modal for forcible orientation from portrait to landscape mode in small devices.

The output is showing only half of the video (ie North,East) within the modal and other part is moving outside the modal.

But I want to show all the part with tin the modal only.

I am new to this one can anyone help me regarding this

Answer 1

You'll set height = 150% of view width ( height: 150vw; )

Try to setup max-width and max-height parameters to limit sizes of block;