怎么让盒子中的img横向铺满div

可以使用CSS中的`object-fit`属性来实现。具体来说，你可以将盒子设为flex容器，然后将img元素设为flex项目，并且设置`object-fit: cover`属性，这样就可以让图片铺满整个div了。以下是一个示例的代码：

HTML代码：

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

CSS代码：

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

上述代码中，我们将盒子设为flex容器，并且将img元素设为flex项目，然后设置了`object-fit: cover`属性，这样图片就可以横向铺满整个div了。同时，我们还设置了盒子的宽度和高度，以及`justify-content: center`和`align-items: center`属性，来居中显示图片。

相关问题

如何让img在div中自由拖拽

可以使用HTML5中的draggable属性来实现在div中自由拖拽img元素。具体实现方法如下：

1. 首先，在img标签中添加draggable属性，将其设为true，表示该元素可被拖拽：

<img src="image.jpg" draggable="true" />

2. 在父元素div中添加以下三个事件处理程序：

<div ondragover="allowDrop(event)" ondrop="drop(event)" ondragstart="drag(event)">
  <img src="image.jpg" draggable="true" />
</div>

其中，ondragover事件处理程序用于防止默认行为，ondrop事件处理程序用于在拖拽结束时执行操作，ondragstart事件处理程序用于在拖拽开始时执行操作。

3. 在JavaScript中实现以上三个事件的具体操作，代码如下：

function allowDrop(event) {
  event.preventDefault();
}

function drag(event) {
  event.dataTransfer.setData("text", event.target.id);
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  event.target.appendChild(document.getElementById(data));
}

其中，allowDrop()函数用于阻止默认行为，drag()函数用于在拖拽开始时将被拖拽元素的ID保存到dataTransfer对象中，drop()函数用于在拖拽结束时获取dataTransfer对象中保存的元素ID，并将该元素添加到目标容器中。

通过以上步骤，就可以在div中自由拖拽img元素了。

让div中的img居中

可以使用以下样式使 `div` 中的 `img` 居中：

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

这将使 `div` 成为一个弹性容器，并且将图像水平和垂直居中在其中。如果你只想在水平方向上居中图像，可以将 `align-items` 属性设置为 `center`。