CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)

关于“CSS 使用 resize 实现图片拖拽切换预览功能”的完整攻略，可以分为以下4步进行讲解：

1. HTML 结构准备

首先需要准备HTML结构，包括两个容器，一个用于显示图片的容器，另一个用于显示预览的容器。代码示例如下：

<div class="image-container">
  <img src="image1.jpg" alt="image1">
</div>

<div class="preview-container">
  <img src="image2.jpg" alt="image2">
</div>

2. CSS 样式调整

由于需要使用 CSS 的 resize 属性来实现图片的拖拽切换预览功能，因此需要对两个容器进行相应的样式设置。代码示例如下：

.image-container {
  resize: both;
  overflow: auto;
  width: 500px;
  height: 500px;
}

.preview-container {
  width: 500px;
  height: 500px;
}

需要注意的是，当使用 resize 属性时，需要将 overflow 属性设置为 auto，否则无法实现拖拽功能。

3. JS 代码执行

由于 resize 属性只能在某些浏览器上生效，因此需要使用 JavaScript 来兼容处理。这里使用 jQuery 库来实现。代码示例如下：

$('.image-container').on('resize', function() {
  var imgSrc = $('.image-container').find('img').attr('src');
  $('.preview-container').find('img').attr('src', imgSrc);
});

这段代码的作用是，当拖拽 image-container 容器时，获取其内部图片的src属性值，并将其赋值给 preview-container 容器内的图片的src属性。

4. 完整代码示例

综合前三步的内容，完整的代码示例如下：

<div class="image-container">
  <img src="image1.jpg" alt="image1">
</div>

<div class="preview-container">
  <img src="image2.jpg" alt="image2">
</div>

<style>
.image-container {
  resize: both;
  overflow: auto;
  width: 500px;
  height: 500px;
}

.preview-container {
  width: 500px;
  height: 500px;
}
</style>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('.image-container').on('resize', function() {
  var imgSrc = $('.image-container').find('img').attr('src');
  $('.preview-container').find('img').attr('src', imgSrc);
});
</script>

示例说明

示例1：使用不同的图片文件

分别将image-container容器中的图片文件image1.jpg和preview-container容器中的图片文件image2.jpg更换为不同的图片文件，可以验证该方法可以切换不同的图片文件。

示例2：更换容器的宽高

在样式中更改image-container与preview-container两个容器的宽高，可以发现在调整容器大小时，预览图片的比例也会随之改变，能够完美适应容器大小的改变。