javascript - 在转换后的 div 中防止图像失真？

Question

我正在寻找一种方法来调整此代码笔的背景转换。目标是调整占位符图像，使其位于 mouseenter 之前的正常位置。 ，但仍然旋转了 div，因此它是一个菱形正方形。如您所见，我有一个 jQuery 动画也将发挥作用。这是代码笔:

http://codepen.io/pdnellius/pen/EfkHl

编辑:我已经更新了我的代码以反射(reflect)我所做的更改，这些更改在那里获得了 90% 的效果，但是这感觉真的很糟糕。

我不得不使用 <img> <div> 上的标签而不是背景图片以达到预期的效果。任何人都可以推荐一个可以将 <img> 居中的解决方案吗？当它达到 100% 宽度时保持比例？通常我会使用带有 contain 属性的背景图像来实现这种效果，但由于我不得不使用 <img>标记以获得这种效果，我无法做到这一点。我已经更新了上面的 Codepen 以反射(reflect)我的进步。

HTML

<div id="wrapper">
  <div class="diamond">
    <img src="http://placekitten.com/2100/2800" class="diamond-img">
  </div>
</div>

CSS

body {
margin: 0;
top: 0;
left: 0;
right: 0;
}

#wrapper {
  margin-top: 15em;

  }

.diamond {
  width: 30em;
  height: 30em;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  background: aquamarine;
  margin: 0% 50%;
  position: absolute;
  overflow: hidden;
}
.diamond:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  background: url(background.png) 0 0 repeat;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

.diamond-img {
    height: 60em;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin-y: 30%;
    -webkit-transform-origin-x: 96%;
}

JS

  $( document ).ready(function() {

     $(".diamond").on("mouseenter", function(){
       console.log("entered .diamond");
      $(".diamond").animate({
        transform: 'rotate(0deg)',
        transformOrigin: '0 0',
        margin: '0 0',
        width: '100%',
        height: '40em'
      }), $(".diamond-img").animate({
        width: '100%',
        height: 'auto', 
        transform: 'rotate(0deg)',
      }),

  $("#wrapper").animate({
      marginTop: '0'
    })
  }).on("mouseleave", function(){
    $(".diamond").animate({
    transform: 'rotate(-45deg)',
    transformOrigin: '0 100%',
    width: '30em',
    height: '30em',
    margin: '0 50%'
  }), $(".diamond-img").animate({
    height: '60em',
    transform: 'rotate(45deg)',
    width: '45em',
    // transformOriginX: '30%',
    // transformOriginY: '96%'
  }),
    $("#wrapper").animate({
      marginTop: '15em'
    })
  });
});

Answer 1

好的，来自 THIS网页，我们用 :before kludge 修改你的 fiddle 以获得这个 - FIDDLE .

好点了吗？

CSS

#wrapper {
  margin-top: 15em;
}

.diamond {
  position: relative;
  overflow: hidden;
  width: 30em;
  height: 30em;
  margin: 0% 50%;
}
.diamond:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(http://www.placehold.it/2000x2000) 0 0 no-repeat;
    background-size: cover;
    background-position: center;
}

.diamond:hover:before
{
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: url(http://www.placehold.it/2000x2000) 0 0 no-repeat;
    background-size: cover;
    background-position: center;
    transform: rotate(45deg);
}