Как повернуть img, чтобы границы img остались в пределах div?

#javascript #html #css #css3

На странице есть следующий html: 


   



Если с помощью jquery: $('#img').css('transform','rotate(90deg)'); повернуть img
на 90 градусов, то его граница выходит за пределы div.  



Как повернуть тег img, чтобы его граница оставалась внутри div? При этом высота div
может меняться, а ширина должна остаться без изменений.
И как из кода на JavaScript создать/изменить изображение в теге img без загрузки файла? 
    

Ответы

Ответ 1

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; /* Значение заведомо больше высоты */
}




Ответ 2

Вариант со скриптом для произвольного угла поворота:



function rotateImg(img, angle) {
  var width = img.clientWidth, height = img.clientHeight;
  var sina = Math.sin(angle), cosa = Math.cos(angle);

  img.style.transform = "rotate(" + angle + "rad)";
  img.style.left = height*sina + "px";
  
  var parentStyle = img.parentElement.style;
  parentStyle.width = width*cosa + height*sina + "px";
  parentStyle.height = width*sina + height*cosa + "px";
}
div {
  border: 1px dotted red;
  text-align: center;
  margin: 1em;
}

span {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  border: 1px dotted green;
  overflow: hidden; /* Избавляемся от лишнего пространства */
}

img {
  display: inline-block;
  vertical-align: top;
  transform-origin: 0 0;
  position: relative;
}




Ответ 3

Что бы картинка оставалась в границах и не выступала делай диву 

overflow: hidden;


А на JavaScript создать картинку так

var newImg = document.createElement('img');//Создали пустой тег 
newImg.src = 'http://fafa.ru/image.png';// Установили аттрибут src
newImg.width = 100;
newImg.height = 100;


Ответ 4

html,body{
  overflow:hidden;
}
.red-border{
  width:300px;
  height:300px;
  border:1px solid red;
  margin:50px auto;
  position:relative;
  transition:1s;
  background:red;
}
.orange-border{
  width:200px;
  height:200px;
  border:1px solid orange;
  position:absolute;
  top:50%; left:50%;
  margin-top:-100px;
  margin-left:-100px;
  border-radius:200px;
  line-height:200px;
  text-align:center;
  transition:.8s;
  background:orange;
}
.red-border:hover{
  transform:rotate(-180deg);
}
.red-border:hover .orange-border{
  transform:rotateY(-360deg);
}

  

      Hover Effect
  





исправил ответ - так ?