根据提供的输入（即高度和宽度）调整div的大小，div应包含图像。

问题描述：

I tried input(width,height) and div.But iam not getting how to resize the div which contain image using input provided.As u change the input ,div should  change,at the same time image also

1.	Write a JavaScript function which accepts two inputs namely the height and width of a div and change it according to the input provided. The div should contain an image which will also resize based on the size of the div. If the div tag reaches the maximum size of the image then it should not increase in size and throw an alert saying "Maximum resize limit reached".

我尝试了什么：

What I have tried:

<html>
<head>
<style>
#size {
position:absolute;
height:500;
width:500;
top:20%;
left:30%;
margin:-100px 0 0 -150px;
}
</style>
<script language="text/javascript">
function myFunction()
{
document.getElementById ("size").style.height;
document.getElementById ("size").style.width;
</script>
</head>
<body>
height:<input type="number" value="height"><br>
width:<input type="number" value="width" ><br>
<div id="size" align="center" style="border:1px solid red">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwnuyTru-iUDbPmRb-uHqzTfg3YDHkj_BNfReDUmb5awGMGbaa" style="width:304px;height:228px;">
</div>
<input type="button" value="resize" onclick="myFunction()"><br>
</body>
</html>

答

你已经被告知没有人会为你做功课，请不要重新发布这个问题，请教哟如果你正在努力，或者至少将问题分解成各个部分并做一些基本的谷歌搜索，你的导师。

You've already been told that no-one is going to do your homework for you, please don't repost the question, consult your tutors if you are struggling, or at least break the problem down into sections and do some basic googling.

1。为您的控件提供ID：

1. Provide Id to your controls:

<input type="number" value="height" id="txtHeight">
<input type="number" value="width" id="txtWidth"></input></input>

2.删除大括号前的空格。更改：

2. Remove the space preceding braces. Change:

document.getElementById ("size")

document.getElementById("size")

正确的代码变为：

The correct code becomes:

<html>
<head>
<style>
#size {
position:absolute;
height:500;
width:500;
top:20%;
left:30%;
margin:-100px 0 0 -150px;
}
</style>
<script>
function myFunction()
{
document.getElementById("size").style.height = document.getElementById("txtHeight").value + "px";
document.getElementById("size").style.width = document.getElementById("txtWidth").value + "px";
}
</script>
</head>
<body>
height:<input type="number" value="height" id="txtHeight"><br>
width:<input type="number" value="width" id="txtWidth"><br>
<div id="size" align="center" style="border:1px solid red">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwnuyTru-iUDbPmRb-uHqzTfg3YDHkj_BNfReDUmb5awGMGbaa" style="width:304px;height:228px;">
</img></div>
<input type="button" value="resize" onclick="myFunction();"><br>
</body>
</html></br></br></br>

但我想建议：

1.检查验证（高度和宽度的有效值）

2.使用JQuery进行跨浏览支持。它总是很好。

希望它有所帮助。

But I would like to suggest:
1. Check for validation(valid values for height and width)
2. Use JQuery for cross- browser support. It's always good.

Hope it helps.

根据提供的输入（即高度和宽度）调整div的大小，div应包含图像。

相关推荐