是否可以缩放没有父div边距的图像？

Question

我正在缩放图像以提供缩放效果，但是在显示缩放时，我将img src缩略图更改为更大的图像。

悬停图像时我已经完成了更改。

您可以使用scss“看起来更好”来检查我到目前为止在jsfiddle和摘要中得到的内容。

var images = [
{
  imageId: "5d845072-087a-45ee-9255-841cba6f2742",
  originalImage: "https://via.placeholder.com/500x1500/0000FF/808080/?text=Image00",
  image: "https://via.placeholder.com/160x160/0000FF/808080/?text=Image00"
},
{
  imageId: "2341d8a1-0196-4a9e-aec4-cdf192520fe3",
  originalImage: "https://via.placeholder.com/500x1500/FF0000/FFFFFF/?text=Image01",
  image: "https://via.placeholder.com/160x160/FF0000/FFFFFF/?text=Image01"
},
{
  imageId: "26fa6989-5731-40ab-b355-13b33d4dc078",
  originalImage: "https://via.placeholder.com/500x1500/FFFF00/000000/?text=Image02",
  image: "https://via.placeholder.com/160x160/FFFF00/000000/?text=Image02"
},

{
  imageId: "d7b81bfa-81cb-4010-98cf-ed9ac281dcda",
  originalImage: "https://via.placeholder.com/500x1500/000000/FFFFFF/?text=Image03",
  image: "https://via.placeholder.com/160x160/000000/FFFFFF/?text=Image03"
},
];

$(document).ready(function() {
	images.forEach((data) => {
  	$(`div#img-container-${data.imageId}`)
    	.mouseenter(function () {
      	$(`#img-${data.imageId}`).attr("src", data.originalImage);
    })
    .mouseleave(function () {
    	$(`#img-${data.imageId}`).attr("src", data.image);
    });
  });
});

.listview-images {
  border: none; }
  .list-view-container
.listview-images .slide-image {
    float: left;
    position: relative;
    width: 160px;
    height: 160px;
    margin: 5px;
    padding: 0; }
    .list-view-container
.listview-images .slide-image img {
      display: block;
      max-width: 160px;
      max-height: 160px;
      width: auto;
      height: auto;
      margin: auto; }
    .list-view-container
.listview-images .slide-image .product-image-hidden {
      display: none; }
  .list-view-container
.listview-images .slide-move {
    cursor: move; }
  .list-view-container
.listview-images .zoom {
    transition: transform .2s; }
  .list-view-container
.listview-images .zoom:hover {
    z-index: 1;
    transform: scale(2.5);
    background-color: green;
    align-content: center;
    box-shadow: 5px 10px 8px #888888; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-view-container">
  <ul class="listview-images" data-role="listview" role="listbox">
      <div class="slide-image slide-move zoom" id="img-container-5d845072-087a-45ee-9255-841cba6f2742" role="option" aria-selected="false">
          <img class="product-image" src="https://via.placeholder.com/160x160/0000FF/808080/?text=Image00" style="max-width: 160px; max-height: 160px;" id="img-5d845072-087a-45ee-9255-841cba6f2742">
      </div>

      <div class="slide-image slide-move zoom" id="img-container-2341d8a1-0196-4a9e-aec4-cdf192520fe3" role="option" aria-selected="false">
          <img class="product-image" id="img-2341d8a1-0196-4a9e-aec4-cdf192520fe3" src="https://via.placeholder.com/160x160/FF0000/FFFFFF/?text=Image01" style="max-width: 160px; max-height: 160px;">
      </div>

      <div class="slide-image slide-move zoom" id="img-container-26fa6989-5731-40ab-b355-13b33d4dc078" role="option" aria-selected="false">
          <img class="product-image" id="img-26fa6989-5731-40ab-b355-13b33d4dc078" src="https://via.placeholder.com/160x160/FFFF00/000000/?text=Image02" style="max-width: 160px; max-height: 160px;">
      </div>

      <div class="slide-image slide-move zoom" id="img-container-d7b81bfa-81cb-4010-98cf-ed9ac281dcda" role="option" aria-selected="false">
          <img class="product-image" id="img-d7b81bfa-81cb-4010-98cf-ed9ac281dcda" src="https://via.placeholder.com/160x160/000000/FFFFFF/?text=Image03" style="max-width: 160px; max-height: 160px;">
      </div>
  </ul>
</div>

预期结果应显示较大的图像，没有绿色边距，只有图像应该是可选择区域或悬停区域；因为列表上的项目可以通过拖放进行排序。