5

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

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

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

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

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

8
  • как вариант, если высота родителя непостоянна, то считывай эту высоту перед поворотом картинки, например, и присваивай её этой картинке. тогда она будет масштабироваться под родителя
    – lexxl
    6 янв 2016 в 12:14
  • document.getElementById('img').src = '...'; изменить картинку, document.getElementById('img').style.height = '...'; изменить её высоту
    – lexxl
    6 янв 2016 в 12:16
  • что имеется ввиду под создать изображение в img?
    – Grundy
    6 янв 2016 в 14:41
  • @Grundy "что имеется ввиду под создать изображение в img?" -- как в c# что-то вроде: using(var g = Graphics.From(img)) g.FillRectangle(...);
    – Stack
    6 янв 2016 в 14:52
  • 2
    @Stack, для этого может использоваться элемент canvas, а затем результат сохранен в img
    – Grundy
    6 янв 2016 в 14:55

4 ответа 4

3

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>

9
  • на 90 работает. а возможно ли универсальное решение, чтобы можно было указать угол поворота из javascript?
    – Stack
    8 янв 2016 в 6:24
  • @Stack, без известных пропорций - сомнительно. Но ты же просил на 90.
    – Qwertiy
    8 янв 2016 в 9:24
  • "Но ты же просил на 90." -- если для 90 работает, то я думал, что если для любого другого угла поворота смогу сделать. оказалось, что с css не все так просто. но 90 тоже хорошо, спасибо, есть от чего отталкиваться.
    – Stack
    8 янв 2016 в 10:55
  • @Stack, это тогда надо было какой-то произвольный угол просить. Для 90 почте везде будет особый способ. Кстати, а ведь скрипт может узнать размеры картинки и на их основе сделать css - почему бы таким вариантом не воспользоваться?
    – Qwertiy
    8 янв 2016 в 10:57
  • "скрипт может узнать размеры картинки и на их основе сделать css" -- надо вычислять размер прямоугольника после поворота. и менять размер img. как раз смотрю как это можно сделать.
    – Stack
    8 янв 2016 в 15:09
1

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

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;
}
<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350×150&w=350&h=150" onload="rotateImg(this,Math.PI/3)"></span></div>
<div><span><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150×350&w=150&h=350" onload="rotateImg(this,Math.PI/3)"></span></div>

2
  • @Stack, исправил - теперь всё ровно.
    – Qwertiy
    9 янв 2016 в 0:34
  • Как оказалось, работает не всегда.
    – Qwertiy
    5 апр 2016 в 13:21
1

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);
}
<div class="red-border">
  <div class="orange-border">
      Hover Effect
  </div>
</div>

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

6
  • "вот так ?" -- это не то. нужен поворот по часовой стрелке на 90 градусов. и чтобы рис. оставался в границах своего контейнера.
    – Stack
    7 янв 2016 в 13:07
  • "исправил ответ" -- если красный тут вместо рисунка, то у него при повороте заметно как его угол выходит за пределы контейнера. а надо чтобы красный квадрат полностью был виден при повороте. для этого, его надо наверное уменьшать немного, чтобы он вписывался в контейнер.
    – Stack
    9 янв 2016 в 16:28
  • гадать бесполезно , что вам нужно , в общем - тот самый красный это изображение ? а тот круглый это должен быть квадрат ?
    – user33274
    10 янв 2016 в 1:15
  • 1
    jsfiddle.net/ukj2L14n/1 вот так с фото
    – user33274
    10 янв 2016 в 1:21
  • 1
    jsfiddle.net/ukj2L14n/2 второй вариант - фото не выходит за рамки
    – user33274
    10 янв 2016 в 1:34
0

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

overflow: hidden;

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

var newImg = document.createElement('img');//Создали пустой тег <img>
newImg.src = 'http://fafa.ru/image.png';// Установили аттрибут src
newImg.width = 100;
newImg.height = 100;
3
  • Изменить точно так же аттрибут. Выбрать твою картинку по айди или классу, и изменить аттрибут src var img = document.getElementById('kart1nka'); img.src = 'новая_ссылка';
    – user197892
    6 янв 2016 в 12:02
  • при 'overflow: hidden' картинка выходит за пределы и ее часть просто не видна. а надо чтобы оставалась в пределах div и была видна полностью. newImg.src = 'http:... - не подходит. надо без обращения к серверу.
    – Stack
    6 янв 2016 в 12:02
  • Если у тебя ширина дива будет без изменений, нужно тогда размеры картинки уменьшать. newImg.src = это такой же аттрибут который и стоит у тебя в картинке, впихни туда значение картинки которая лежит в папке
    – user197892
    6 янв 2016 в 12:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.