主页 / 问题 / 909954
Accepted
KordDEM
Asked:2020-11-22 13:17:06 +0000 UTC2020-11-22 13:17:06 +0000 UTC

旋转img而不走出div

  • 772

当我单击图像时，img 中有一个 div，我将其旋转 90 度（变换：旋转）。但问题是 img 开始超出 div，与父元素重叠。溢出：隐藏不是解决方案。

$('.imgPrevAuto').on('click', function() {
  deg += 90;
  $('.imgPrevAuto').css('transform', 'rotate(' + deg + 'deg)');
});
  .imgPrevAuto {
  margin: auto;
  position: relative;
  top: 0;
  left: 0;
  max-width: 100%;
  transform-origin: center center;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
  <div class="col-md-12 col-xs-12 column text-center" id="imgShow" style="height: 1368px;">
    <img src="path" class="imgPrevAuto">
  </div>
</div>

{但愿如此

javascript

2 个回答

  1. Best Answer

    var angle = 90;
$('div').click(function(){
  var blockHeight = $(this).height(),
      img = $(this).children('img');
      
  img.css('transform','rotate('+angle+'deg)');
  angle%180 ? img.addClass('side'):img.removeClass('side');
  
  angle +=90;
})
    *{
  box-sizing:border-box;
}
div{
  width:200px;
  border:1px solid;
  text-align:center;
}
img{
  vertical-align:top;
  height:100px;
  width:auto;
}
img.side{
  width:100px;
  object-fit:cover;
  object-position:center;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img src="https://coubsecure-s.akamaihd.net/get/b28/p/coub/simple/cw_timeline_pic/04b5e5624e5/a67f00fb81c169ee1a6a8/med_1429990100_image.jpg" alt="" />
</div>

    • 2

  2. 作为一个选项 - 用图片旋转 div，而不是 div 内的图片。或者在旋转时将 div 的高度分配给图像的宽度。

    • 0

相关问题