根据提供的输入（即高度和宽度）调整div的大小，div应包含图像。 [英] Resize the div according to input provided namely height and width, the div should contain image.
本文介绍了根据提供的输入（即高度和宽度）调整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")
to
to
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应包含图像。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
