layui等比例放大/缩小图片

要实现layui等比例放大/缩小图片，可以使用CSS的background-size属性，让背景图片按比例缩放。

具体实现步骤如下：

1. 为目标元素设置背景图片，可以使用CSS的background-image属性。

2. 设置背景图片的大小，可以使用CSS的background-size属性。这里我们设置为contain，表示保持图片比例不变，并尽可能填充整个目标元素，但不会超过目标元素的边界。

3. 设置背景图片的位置，可以使用CSS的background-position属性。这里我们设置为center center，表示将背景图片居中显示。

下面是一个示例代码：

<div class="image-container"></div>

<style>
.image-container {
  background-image: url("your-image-url.jpg");
  background-size: contain;
  background-position: center center;
  width: 300px;
  height: 200px;
}
</style>

你可以将上面的代码复制到你的HTML文件中，将your-image-url.jpg替换为你自己的图片链接，然后调整width和height属性来设置目标元素的大小。

相关问题

layui 等比例放大/缩小图片

layui是一个轻量级的前端UI库，它提供了一种简单的方式来处理图片的等比例缩放。在layui中，你可以通过JavaScript或者其提供的API来实现图片的动态放大和缩小功能。以下是一个基本的例子：

<div id="image-container">
  <img src="your-image-url" lay-scale="show" />
</div>

在这个例子中，`lay-scale="show"`这个属性开启了一个图片的点击手势，当用户双击图片时，图片会按照一定的比例进行放大显示。如果需要还原或缩小，通常可以通过点击外部区域或者再次双击图片来操作。

如果你想要更精细的控制，可以利用layui的自定义事件来监听缩放操作，并调整图片大小：

var img = layui.$('#image-container img');
img.layEvent('scale', function(obj) {
  // obj.scale 是当前的缩放比例，可以根据需求设置新的大小
  var newWidth = originalWidth * obj.scale;
  var newHeight = originalHeight * obj.scale;
  img.attr({
    width: newWidth,
    height: newHeight
  });
});

记得替换 `originalWidth` 和 `originalHeight` 为你的图片原始尺寸。