установить ширину и высоту изображения после преобразования: повернуть

Question

У меня есть div с шириной: 190px и высотой: 260px, я назначаю тег img для этого div, когда я загружаю изображение, которое показывает, как изображение до, после этого я поворачиваю изображение, но ширина и высота изображенияне изменился, как div, я использовал наследовать, все о позиции и отображении, но ничего хорошего нет.

Answer 1

Наследование не будет работать.Потому что вы должны установить ширину вашего изображения как высоту вашего родителя.Тогда он будет полностью изменен в родительском элементе.

ширина изображения = parent-height

Потому что после применения свойства transformСвойство width и height также будет повернуто в этом отношении.

Sol 1: измените ширину вашего изображения вместе со свойством transform.(Если это переменная, то вы можете использовать переменные SCSS для присвоения одинаковых значений ширине изображения и родительской высоте.)

Sol 2: Это не идеальное решение, ноработать во многих случаях.Добавьте свойство масштаба к свойству преобразования следующим образом:

transform: rotate(90deg) scale(.7);

Настройте значения масштаба в соответствии с вашими предпочтениями.

Answer 2

Привет,

Пожалуйста, попробуйте этот код.

var $=jQuery.noConflict();
$(document).ready(function(){
	$('#RotateButton').click(function(){
	   $('.col').toggleClass("afterRot");
	});
});
/* ----- IE Support CSS Script ----- */
var userAgent, ieReg, ie;
userAgent = window.navigator.userAgent;
ieReg = /msie|Trident.*rv[ :]*11\./gi;
ie = ieReg.test(userAgent);
if(ie) {
  $(".col").each(function () {
    var $container = $(this),
        imgUrl = $container.find("img").prop("src");
    if (imgUrl) {
      $container.css("backgroundImage", 'url(' + imgUrl + ')').addClass("custom-object-fit");
    }
  });
}

body { padding: 0; margin: 0; }
.col { position: relative; display: block; width:100vh; height: 100vh; }
.afterRot{ transform: rotate(90deg); object-fit: cover; }
.col img { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;	object-fit: cover; }
.custom-object-fit { position: relative; background-size: cover; background-position: center center; }
.custom-object-fit img { opacity: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mob">
	<button type="button" id="RotateButton"> Rotate </button>
	<div class="col">     
    	<img class="nor" id="rowImg" src="https://cdn-images-1.medium.com/max/1600/1*tSyuv3ZRCfsSD5aXB7v8DQ.png">
    </div>
</div>

Answer 3

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

$(document).ready(function(){
$('#RotateButton').click(function(){
   $('#rowImg').removeClass("normalx").addClass("afterRot");
});
});

для css вроде

.col {
  width:260px;
  height:190px:
  border: solid 1px #6c757d;
  padding: 10px;
}
.nor{
  width:250px;
  height:150px;
}
.afterRot{
  width:inherit;
  transform: rotate(90deg);
}

У меня есть образец здесь