以 div 的特定高度显示完整图像

Question

您好，我想在指定高度 div 显示完整图像，并将其设置为 div 的背景。到目前为止我已经尝试过裁剪图像并且不显示图像的完整高度。有帮助吗？

HTML:

 <div *ngIf="item.type==='P'"   [ngStyle]="{'background-image': 'url(' + item.image_path + ')','background-repeat':'no-repeat',
  'height':'400px','width':'100%','border-bottom-left-radius': '5px','border-bottom-right-radius': '10px'}">
    <ion-row>
      <ion-col col-4>
        <div>
          Some text
        </div>
      </ion-col>
      <ion-col col-8>
          <button ion-button round outline>
            some button
          </button>
      </ion-col>
    </ion-row><br>
    <span style="background:none;float: left">
      <button ion-button outline round padding color="light">
        <h1>name</h1>
      </button>
    </span>
  </div>

Answer 1

检查一下，您需要在图片标签中指定尺寸

.image{
            background: url('https://images.pexels.com/photos/219998/pexels-photo-219998.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
            height: 250px;
            width: 100%;
            background-repeat: round;
        }

<div class="image">
        
</div>

Answer 2

好的，它只需要一个背景大小：200px 100px;

以 div 的特定高度显示完整图像

Show full image in certain height of div

css

ionic3

angular