让img在div里显示，高自适应，宽显示img左边的百分之50%填满div

如果你希望一个 `img` 元素在一个 `div` 元素中，高度自适应，宽度填充 `div` 的一半，可以使用 flexbox 布局来实现。具体做法如下：

HTML 代码：

<div class="container">
  <img src="your-image-url" alt="your-image-description">
</div>

CSS 代码：

.container {
  display: flex;
  flex-wrap: wrap;
}

.container img {
  flex: 0 1 50%; /* 设置宽度为父元素的一半 */
  height: auto; /* 高度自适应 */
  object-fit: cover; /* 图片填充 */
}

上面的代码中，我们使用了 `flexbox` 布局，将 `container` 元素的 `display` 属性设置为 `flex`，并设置了 `img` 元素的宽度为父元素的一半。同时，我们还使用了 `object-fit: cover` 属性来保持图片的宽高比例，并填充整个 `img` 元素。

这样，你就可以实现一个高度自适应、宽度填充 `div` 一半的 `img` 元素了。

相关问题

css设置图片宽高，始终填满img外div

在CSS中，如果你想让图片始终保持其原始宽高比例，并且填充其外部容器div直到完全占据空间，可以使用相对单位或者`object-fit`属性来实现。这里有两个方法：

1. **百分比宽度和高度**:
如果图片的宽度和高度都可以是动态值，可以给图片设置宽度和高度都为100%，让它始终保持原始宽高比。同时，你需要将外部div的宽度设置为`width: 100%`并设置`height: auto`，以便图片的高度根据内容自适应。

   .container {
     width: 100%;
     height: auto; /* 这里不需要height: 100% */
   }

   img {
     width: 100%;
     height: 100%; /* 维持原始宽高比 */
   }

2. **使用`object-fit`属性**:
`object-fit` 属性允许你在容器大小发生变化时，调整图像的尺寸以适合容器。设置为`cover`可以让图片充满容器，同时维持其原始宽高比。

   .container {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
   }

   img {
     max-width: 100%;
     max-height: 100%;
     object-fit: cover; /* 使图片充满容器 */
   }

注意：这种方法对非正方形图片可能会裁剪部分内容。

html使div里面插入的图片填满div

你可以通过CSS中的`object-fit`属性来控制图片填充div的方式，示例代码如下：

HTML代码：

<div class="container">
  <img src="your-image-url" alt="your-image-description">
</div>

CSS代码：

.container {
  width: 300px; /* 设置div的宽度 */
  height: 300px; /* 设置div的高度 */
  overflow: hidden; /* 隐藏图片溢出的部分 */
}

.container img {
  width: 100%; /* 让图片宽度自适应div的宽度 */
  height: 100%; /* 让图片高度自适应div的高度 */
  object-fit: cover; /* 将图片缩放至完全填充div */
}

这样，图片就会按照`object-fit: cover`的方式填充整个div了。如果你想让图片保持原始比例，可以将`object-fit`属性的值设置为`contain`。