图片自适应容器大小怎么写

要让图片自适应容器大小，可以使用 CSS 中的 `max-width` 和 `max-height` 属性。

例如，如果要将一张图片放入一个容器中，并使其自适应容器的大小，可以这样写：

<div class="container">
  <img src="path/to/image.jpg" alt="image" />
</div>

.container {
  max-width: 100%;
  max-height: 100%;
}

img {
  max-width: 100%;
  max-height: 100%;
  display: block; /* 解决图片默认为 inline 元素导致底部空白的问题 */
}

这样设置后，无论容器大小如何变化，图片都会自动缩放以适应容器的大小。同时，图片也会保持其原始的宽高比例。

相关问题

canvas 设置图片自适应容器大小

你可以使用 CSS 的 background-size 属性将图片设置为自适应容器大小。具体做法是：将图片作为容器的背景图片，并将 background-size 属性设置为 cover 即可。例如：

.container {
  background-image: url('your-image.jpg');
  background-size: cover;
}

这样，无论容器的大小如何改变，图片都会自动适应容器大小。

图片自适应容器大小且不重复

您好，对于图片自适应容器大小且不重复的需求，可以使用CSS中的background-size属性和background-repeat属性来实现。

具体的实现方法如下：

1. 设置容器的宽度和高度，例如：

   .container {
     width: 500px;
     height: 300px;
   }

2. 设置容器的背景图片，例如：

   .container {
     background-image: url('image.jpg');
   }

3. 设置背景图片的大小为容器的宽度和高度，同时设置背景图片不重复，例如：

   .container {
     background-image: url('image.jpg');
     background-size: cover;
     background-repeat: no-repeat;
   }

这样设置后，图片就会自适应容器的大小，并且不会重复出现。其中，background-size属性的值为cover时，表示背景图片会被缩放以填充整个容器，并且可能会被裁剪；而background-repeat属性的值为no-repeat时，表示背景图片不会重复出现。