CSS + jQuery: масштабировать, центрировать и вращать изображения внутри контейнера - PullRequest
Новая
       10

CSS + jQuery: масштабировать, центрировать и вращать изображения внутри контейнера

0 голосов
/ 18 июня 2019

Если вы посмотрите на https://jsfiddle.net/0spv56uk/1/

Я создаю что-то на веб-сайте с контейнером. Этот контейнер не может стать шире (он может стать немного выше - чтобы уменьшить размер экрана)

Внутри этого контейнера я буду устанавливать изображения. Все они различаются по размеру.

Эти изображения / SVG имеют возможность вращаться при нажатии кнопки (как показано в коде). Сейчас я использую 90 градусов, но может понадобиться при 45 градусах позже.

У меня проблема в том, что изображение переполняет контейнер при повороте. Мне нужно, чтобы он масштабировался внутри контейнера при вращении. (Дно контейнера должно быть расширяемым, но не верх). Я просмотрел здесь другие потоки, и они либо жестко запрограммировали масштаб (который работает, только если у вас есть одно изображение), либо код не очень хорошо подходит для меня.

Спасибо всем заранее.

Это давало мне кошмары в течение некоторого времени.

Вот мой код 

var myArray = ['0deg', '90deg', '45deg','180deg','270deg']; var myIndex = 1; 
function nextRotation() { return 'rotate('+myArray[myIndex++%myArray.length];+')' };

$('#btn1').click(function(){
    $('#testImg').css('transform', nextRotation() );
    $('#testImg').css('-webkit-transform', nextRotation() );
    $('#testImg').css('-moz-transform', nextRotation() );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/smile.svg'>Img1</button>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/juanmontoya_lingerie.svg'>Img2</button>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/php.svg'>Img3</button>
<button type="button" id="btn1" >Rotate Div</button>

<DIV id="container" style=" wid th:60%;border-style:dotted;">

  <DIV id="outer" width="100%">
    <img id ="testImg" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/smile.svg"   style="width:100%;height:100%;">
  </DIV>
</DIV>

1 Ответ

0 голосов
/ 18 июня 2019

Вы могли бы заставить его работать, сопоставив высоту изображения с шириной контейнера.Я также сделал относительное положение контейнера.

Обратите внимание, что вы также работаете с прозрачностью изображения, так что создается впечатление, что она оставляет кучу пустого пространства.

Я только что добавил: 

$('#testImg').css('height', $('#container').width() );

Это похоже на работу, но может растянуть изображение

...