通过动态设置高度来裁剪图像

<div style="height: 200px; overflow: hidden;">
  <img src="image.jpg" alt="裁剪图像">
</div>

<div id="image-container">
  <img id="image" src="image.jpg" alt="裁剪图像">
</div>

<script>
  var container = document.getElementById('image-container');
  var image = document.getElementById('image');
  
  // 获取图像的原始高度和宽度
  var originalHeight = image.naturalHeight;
  var originalWidth = image.naturalWidth;
  
  // 计算裁剪高度
  var cropHeight = 200;
  var cropWidth = (cropHeight / originalHeight) * originalWidth;
  
  // 设置图像元素的样式
  image.style.height = cropHeight + 'px';
  image.style.width = cropWidth + 'px';
</script>