How do you turn img so that the boundaries of img remain within div?



  • There's the following html on the page:

    <div style="border: 1px dotted red; float:left; padding:10px;">
       <img id="img" style="border:1px solid silver" />
    </div>
    

    If with jquery: $('#img').css('transform','rotate(90deg)'); Turn img 90 degrees, its border goes beyond div

    введите сюда описание изображения

    How to turn the gate imgto keep its border inside div? Height div may change and the width shall remain unchanged.
    And like the JavaScript code to create/ change the image in the current. img without downloading the file?


  • QA Engineer

    div {
      border: 1px dotted red;
      text-align: center;
      margin: 1em;
      overflow-y: hidden; /* Убираем лишнее пространство, если высота больше ширины */
    }
    

    span {
    display: inline-block;
    vertical-align: top;
    }

    span:before {
    content: "";
    display: inline-block;
    vertical-align: top;
    padding-top: 100%;
    }

    img {
    display: inline-block;
    vertical-align: top;
    transform: rotate(90deg) translateY(-50%);
    transform-origin: 0 0;
    position: relative;
    left: 50%;
    margin-bottom: -10000px; /* Значение заведомо больше высоты */
    }

    <div><span><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350×150&w=350&h=150"></span></div>
    <div><span><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150×350&w=150&h=350"></span></div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2