让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` 元素了。

相关问题

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`。

在一个div里只能有四张图片，多的隐藏，点击左滑动，图片全部向右移一次

您可以使用CSS和JavaScript来实现这个功能。首先，将四张图片放置在一个具有固定宽度和高度的div容器中。然后，使用CSS的overflow属性将超出容器宽度的图片隐藏起来。最后，使用JavaScript来实现点击左滑动时，将所有图片向右移动一次的功能。

以下是一个示例的HTML、CSS和JavaScript代码：

HTML代码：

<div id="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
  <img src="image4.jpg" alt="Image 4">
</div>
<button onclick="slideImagesLeft()">左滑动</button>

CSS代码：

#image-container {
  width: 400px; /* 根据您的需要设置宽度 */
  height: 200px; /* 根据您的需要设置高度 */
  overflow: hidden;
  position: relative;
}

#image-container img {
  width: 100%; /* 图片宽度填满容器 */
  height: auto; /* 根据宽度自适应高度 */
  float: left;
}

JavaScript代码：

function slideImagesLeft() {
  var imageContainer = document.getElementById("image-container");
  var images = imageContainer.getElementsByTagName("img");

  // 获取第一个图片元素
  var firstImage = images[0];

  // 将第一个图片元素移动到最后
  imageContainer.appendChild(firstImage);

  // 将所有图片元素向右移动一个位置
  for (var i = 0; i < images.length; i++) {
    var image = images[i];
    image.style.marginLeft = "-100%";
  }
}

以上代码中的图片宽度和高度可以根据您的实际需求进行调整。当用户点击"左滑动"按钮时，会触发slideImagesLeft()函数，该函数将第一个图片元素移动到最后，并将所有图片元素向右移动一个位置。这样，用户就可以通过多次点击按钮来实现图片的滑动效果。