Question

我想有一个可以根据容器大小调整的图像。

示例：容器为100x100像素，图像为90x80像素，图像的较小属性（在这种情况下为高度）将调整为容器大小，而较大的属性将溢出容器大小。

我该怎么做？

我的代码：

HTML

<div class="a-avatar">
  <img src="#" alt="profile picture">
</div>

CSS

  .a-avatar {
    display: block;
    width: 100px;
    height: 100px;
  }

  .a-avatar img {
    min-width: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
  }

Answer 1

使用背景图片，例如：-

 div.avatar {
     background-image: url("paper.gif");

    height: 500px; /* You must set a specified height */
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover; /* Resize the background image to cover the entire container 
    }

Answer 2

使用W3学校的这个示例。

<img src="nature.jpg" alt="Nature" class="responsive">

.responsive {
  width: 100%;
  height: auto;
}

容器上的图像尺寸

2 个答案: