Question

我需要弄清楚如何使旋转的对象适合其容器。

该对象不是正方形

我将如何将该对象的尺寸缩放为其父对象？目前，对象在旋转时溢出，但是它应该留在边框内，以使用户不会感觉到截断的外观。

我正在寻找的解决方案应该能够通用地用于所有对象，而不必对特定对象的尺寸进行硬编码。

我想要的示例在此线程中：Rotated elements in CSS that affect their parent's height correctly

很遗憾，答案是将其缩放为（0.8），但是，对我来说，图像的大小可能有所不同，并且必须比硬编码的值更具动态感

在此先感谢大家

var myArray = ['270deg', '180deg'];
var myIndex = 1;

function nextRotation() {
  return 'rotate(' + myArray[myIndex++ % myArray.length]; + ')'
};

$('#btn1').click(function() {
  $('#Layer_1').css('transform', nextRotation());
  $('#Layer_1').css('-webkit-transform', nextRotation());
  $('#Layer_1').css('-moz-transform', nextRotation());
});

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
   display: grid;
  grid-template-columns: auto;
}



.leftcolumn {
  float: left;
  width: 20%;
}

.rightcolumn {
  float: left;
  width: 75%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 800px) {
  .leftcolumn,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

#Layer_1 {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.rect {
  border: 1px solid #3498db;
  padding: 10px 20px;
  margin: 10px;  
}

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="row">
    <div class="leftcolumn">
      <div class="card">              
          <button type="button" id="btn1">Rotate Image</button>        
      </div>
    </div>
    <div class="rightcolumn">
      <div class="card">
        <DIV id="svgMaps" style=" width:100%;   background-color: powderblue;">
          <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="50%" viewBox="0 0 70 143">
                         <rect x="10.0" y="10.0" fill="#74B9FF" stroke="#FFFFFF" stroke-width="0.0439" stroke-miterlimit="10" width="40" height="700"/>
                </svg>
        </DIV>
      </div>
    </div>
  </div>
</body>
</html>

CSS转换：旋转对象并缩放以适合容器内

0 个答案: