CSS Transform: Rotate object and scale to fit inside container

Question

I need to figure out how to have a rotated object fit into its container.

This object is not square

How would i go about having this object scale in size into it's parent? At the moment the object is overflowing when rotated, but it should stay inside the borders so that the user doesn't experience a cut-off look.

The solution I am looking for should be able to be applied generically to work with all objects and not hard-coding the dimensions of this specific one.

An example of what i want is in this thread: Rotated elements in CSS that affect their parent's height correctly

Unfortunately the answer was to scale it to (0.8), whereas, for me the images may differ in size and it must be more dynamic than a hardcoded value

Thank you all in advance friends

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>

There is a detailed explanation in this thread: https://stackoverflow.com/questions/16301625/rotated-elements-in-css-that-affect-their-parents-height-correctly — Strider2342, Jun 17 '19 at 17:20
@Strider2342 - Thanks, I seen that thread but unfortunately it is the inverse of my question. They discuss Making the parent bigger. In my case, the parent width cannot change. The child has to fit into the parent. Imagine an image of a smartphone 100 wide and 200 high. The parent on the page cannot be any wider than 200 due to columns on page. when you rotate the phone image 90 degrees it will come out of the view box. I need it to shrink to fit on page. — Ess Kay, Jun 17 '19 at 18:08

CSS Transform: Rotate object and scale to fit inside container

0 Answers0