使用插图旋转幻灯片时，幻灯片中的图像会扭曲答案

【问题标题】：Images in slideshow distort when inset is used to rotate slides使用插图旋转幻灯片时，幻灯片中的图像会扭曲
【发布时间】：2021-03-14 19:06:28
【问题描述】：

我有一个用 jshowoff[1] 制作的幻灯片。我把重要的部分复制到这里。请看一下。

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
  <style>
    #features {
      position: relative;
      overflow: hidden;
      width: 300px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="banner" id="mid_banner">
    <div class="jshowoff jshowoff-1" style="position: relative;">
      <div id="features" style="position: relative;">
        <a href="/">
          <img src="https://panthi.lk/test/one.png" width="100%" height="100%">
        </a>
        <a href="/">
          <img src="https://panthi.lk/test/two.png" width="100%" height="100%">
        </a>
        <a href="/">
          <img src="https://panthi.lk/test/three.png" width="100%" height="100%">
        </a>
      </div>
    </div>
  </div>

  <script type="application/javascript">
    $(document).ready(function() {
      $('#features').jshowoff({
        effect: 'slideLeft',
        changeSpeed: 2500,
        speed: 3000
      });
    });
  </script>

</body>

</html>

您可能会注意到，当新图像滑入时，旧图像在滑出时会变形。发生这种情况是因为图像尺寸大于主 div，并且当新图像滑入旧的拳头时，会在滑出之前恢复到原始尺寸。

我想解决这个问题。我尝试了很多技巧，但到目前为止没有运气。那里的 CSS 专家，非常感谢您的帮助。我需要的只是一些线索。

[1]https://ekallevig.com/jshowoff/

【问题讨论】：

标签： javascript html css jshowoff

【解决方案1】：

我可以用这个解决它。

<a href="/" style="height: 100%; width: 100%;">

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://panthi.lk/js/jquery.jshowoff.copy.js"></script>
  <style>
    #features {
      position: relative;
      overflow: hidden;
      width: 300px;
      height: 100px;
    }
  </style>
</head>

<body>
  <div class="banner" id="mid_banner">
    <div class="jshowoff jshowoff-1" style="position: relative;">
      <div id="features" style="position: relative;">
        <a href="/" style="height: 100%; width: 100%;">
          <img src="https://panthi.lk/test/one.png" width="100%" height="100%">
        </a>
        <a href="/" style="height: 100%; width: 100%;">
          <img src="https://panthi.lk/test/two.png" width="100%" height="100%">
        </a>
        <a href="/" style="height: 100%; width: 100%;">
          <img src="https://panthi.lk/test/three.png" width="100%" height="100%">
        </a>
      </div>
    </div>
  </div>

  <script type="application/javascript">
    $(document).ready(function() {
      $('#features').jshowoff({
        effect: 'slideLeft',
        changeSpeed: 2500,
        speed: 3000
      });
    });
  </script>

</body>

</html>

【讨论】：