css如何设置图片拉伸

如何设置图片拉伸？

在CSS中，我们可以使用“background-size”属性来控制图片的尺寸和拉伸。

background-size有两个值：contain和cover。

当值为contain时，图片会根据容器的大小调整自己的大小，以确保完整显示图片。

    <div class="container">
      <div class="image1"></div>
    </div>

    .container {
      width: 500px;
      height: 500px;
      background-color: #ccc;
    }

    .image1 {
      width: 100%;
      height: 100%;
      background-image: url("example.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
    

当值为cover时，图片会被拉伸以充满整个容器。请注意，这可能会导致部分图片被裁剪掉。

    <div class="container">
      <div class="image2"></div>
    </div>

    .container {
      width: 500px;
      height: 500px;
      background-color: #ccc;
    }

    .image2 {
      width: 100%;
      height: 100%;
      background-image: url("example.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    

我们还可以使用CSS的“object-fit”属性来控制图像的缩放行为。该属性有五个值：fill、contain、cover、scale-down和none。

    <img src="example.png" alt="example" class="image3">

    .image3 {
      width: 100%;
      height: 100%;
      object-fit: cover;
    } 
    

对于能够直接插入HTML代码的情况，可以在img标记中直接使用CSS样式来控制图像的大小和缩放行为。