img 宽度占满父元素宽度，高度等于宽度

您可以使用CSS中的`width`属性和`height`属性来实现这个效果。

首先，将父元素的宽度设置为所需的宽度，可以使用百分比或具体的像素值。然后，将子元素的宽度设置为100%以占满父元素的宽度。

接下来，您可以使用`height`属性来设置子元素的高度，使其等于宽度。这可以使用CSS中的`aspect-ratio`属性来实现。

以下是一个示例代码：

<style>
  .parent {
    width: 500px; /* 设置父元素的宽度 */
  }
  
  .child {
    width: 100%; /* 子元素宽度占满父元素的宽度 */
    aspect-ratio: 1/1; /* 设置子元素的高度与宽度的比例为1:1 */
  }
</style>

<div class="parent">
  <img class="child" src="your-image.jpg" alt="Your Image">
</div>

通过将父元素的宽度设置为所需的宽度，子元素将自动继承父元素的宽度。然后，使用`aspect-ratio`属性将子元素的高度设置为与宽度相等的比例。

相关问题

上传图片宽度高度自适应

要实现图片宽度和高度自适应，可以使用CSS中的max-width和max-height属性。具体做法如下：

1. 在HTML中插入图片，不要设置图片的width和height属性。

2. 使用CSS样式表为图片设置max-width和max-height属性。

例如，假设你要插入一张名为"example.jpg"的图片，代码如下：

<img src="example.jpg" alt="example" class="responsive-img">

然后，在CSS中为该图片设置max-width和max-height属性，代码如下：

.responsive-img {
  max-width: 100%;
  max-height: 100%;
}

这样，图片就会根据其父元素的大小进行缩放，从而实现宽度和高度的自适应。

html 怎么让照片宽度随着高度变化而变化

可以使用 HTML 的 `<img>` 标签并在其中设置 `width` 和 `height` 属性来让图片的宽度和高度随着一个比例变化。

例如，使用 `width` 和 `height` 属性的百分比值可以让图片的宽度和高度相对于父元素的大小进行缩放:

<img src="your-image-source" width="50%" height="50%">

如果需要图片在高度变化时，宽度也相应改变，可以使用 css 中的 aspect-ratio 进行设置

img {
    width:100%;
    height:auto;
    aspect-ratio:auto;
}

这样在高度变化时，宽度也会相应改变