要求:
应该可以改变幻灯片元素的大小。 change the width and height of image
行为:
当我们选择幻灯片时，图像的宽度和高度会显示在输入框中。
当我们更改输入框的宽度和高度时，图像大小没有按预期更改。
请告诉我如何完成这项任务。
HTML:
<img class="imgClass ng-scope" data-ng-style="slideCTRL.changeImagesize(addOn)" ng-src="pictures/vivek/Hydrangeas.jpg" ng-if="addOn.type == 'picture'">
Javascript:
vm.changeImagesize = function (addOn) {
var width = $(".imgContainer").width();
var height = $(".imgContainer").height();
//var height = width * (resolutionY / resolutionX);
var imagewidth=$(".dcsTextbox input.slave").val();
var imageheight=$(".dcsTextbox:eq(1) input.slave").val();
var transform = "";
var origin = "50% 50%";
if (addOn.rotationDeg === 90) {
width = $(".imgContainer").width() * (resolutionY / resolutionX);
height = $(".imgContainer").width();
origin = "0% 0%";
transform = "translateX(" + $(".imgContainer").width() + "px)";
}
if (addOn.rotationDeg === 270) {
width = $(".imgContainer").width() * (resolutionY / resolutionX);
height = $(".imgContainer").width();
origin = "0% 0%";
transform = "translateY(" + width + "px)";
}
var borderStyle = "hidden";
var addOnIndex = $scope.viewModel.selectedAddon;
if (addOnIndex !== undefined && $scope.viewModel.actSlideShow.children[$scope.viewModel.currentSlide].children[addOnIndex] === addOn) {
borderStyle = "dashed";
}
if (addOn.type === "picture") {
return {
"width":imagewidth,
"height":imageheight,
"max-width": width,
"max-height":height,
"transform": transform + " " + addOn.transform,
"transform-origin": origin,
"border-style": borderStyle,
"border-width": "thin",
"object-fit": "cover"
};
} else if (addOn.type === "text") {
return {
position: "absolute",
left: 0,
top: 0,
width: width,
height: height / resolutionY * addOn.height,
"font-size": height / resolutionY * addOn.height,
color: addOn.color,
"text-align": "center",
"border-style": borderStyle,
"border-width": "thin",
transform: transform + " " + addOn.transform,
"transform-origin": origin,
"z-index": addOn.level
};
}
};
最佳答案
看看这个 plnkr 希望有帮助
https://plnkr.co/edit/WtikYf2acN1ZvqQ50hqI?p=preview
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app = "app" ng-controller = "Ctrl">
<img
src="http://www.istockphoto.com/resources/images/PhotoFTLP/img_67920257.jpg"
height={{h}} width={{w}}>
<input type="text" ng-model = "w">
<input type="text" ng-model = "h">
{{w}},{{h}}
</body>
</html>
script.js
angular.module("app",[]).
controller("Ctrl",function($scope){
$scope.w = 0;
$scope.h = 0;
});
关于javascript - 如何根据输入框的值更改图像的宽度和高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46047783/