Javascript 如何将此代码缩放到不同的窗口大小？
我尝试过许多类似问题的解决方案，但它们在我的页面上似乎不起作用。这是我想要扩展的代码。再薄一点，在gif下面，我想每行保留3个框，因为当我打开一个较大的窗口时，其中一个框会向上移动Javascript 如何将此代码缩放到不同的窗口大小？,javascript,html,css,web,webpage,Javascript,Html,Css,Web,Webpage,我尝试过许多类似问题的解决方案，但它们在我的页面上似乎不起作用。这是我想要扩展的代码。再薄一点，在gif下面，我想每行保留3个框，因为当我打开一个较大的窗口时，其中一个框会向上移动 <hmtl> <body> <style> * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
<hmtl>
<body>
<style>
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
float:left;
border: 0px solid #333;
margin: 0%;
overflow: hidden;
width: 425px;
}
.item img {
max-width: 100%;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.item:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
<div class=“main”>
<img src="http://i.imgur.com/PbeUJ56.gif” style="position:absolute; top:0; left:0;" alt=“DESCRIPTION” height=“1280” width=“645”/>
<img src="http://imgur.com/JBWbug1.png" style="position:absolute; top:0; left:0;" alt=“DESCRITPION” height=“2000” width=“720” alt="" usemap="#Map" /><map name="Map" id="Map">
<area alt="" title="" href="" shape="poly" coords="208,42,47,41,41,132,211,132" />
<area alt="" title="" href="" shape="poly" coords="467,73,467,98,654,99,654,74" />
<area alt="" title="" href=" shape="poly" coords="683,73,685,98,855,97,855,77" />
<area alt="" title="" href="" shape="poly" coords="883,71,883,97,986,96,986,77" />
<area alt="" title="" href="" shape="poly" coords="1007,69,1007,95,1092,95,1091,79"/>
<area alt="" title="" href="" shape="poly" coords="1122,71,1122,100,1230,99,1230,71" /> </map>
<div id="zoom">
<div class="item">
<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img">
</div>
<div class="item">
<a href=""><img src="http://imgur.com/zMVcoiJ.png" alt="img">
</div>
<div class="item">
<a href=""><img src="http://imgur.com/aVdSekS.png” alt="img" >
</div>
<div class="item">
<a href=""><img src="http://imgur.com/MKjyo1I.png” alt="img" >
</div>
<div class="item">
<a href=""><img src="http://imgur.com/tpYHlOP.png” alt="img" >
</div>
<div class="item">
<a href=""><img src="http://imgur.com/kzy9T7h.png” alt="img" >
</div>
</div>
</div>
<html>
<body>
* {
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
保证金：0；
填充：0；
}
.项目{
位置：相对位置；
浮动：左；
边框：0px实心#333；
利润率：0%；
溢出：隐藏；
宽度：425px；
}
.项目img{
最大宽度：100%；
-moz转换：所有1；
-webkit转换：所有1；
过渡：所有1；
}
.项目：悬停img{
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
要使其“缩放”或“按您的意愿响应”，您需要使其响应。
因此，与其使用像素（“px”）设置宽度，不如使用百分比（“%”）
因此，将“.item”css更改为：
.item {
position: relative;
float: left;
border: 0 solid #333;
margin: 0;
overflow: hidden;
width: 33.3%;
max-width: 425px;
}
然后你也必须适当地改变你的主要形象。
然而，从您的代码来看，您可能试图在走路之前先运行…从小处开始，学习web设计和开发的基本知识，然后在此基础上进行构建，例如：
永远不要这样做
* {
//...
}
而是根据您的要求执行以下操作：
.main div{
//...
}
除非必须，否则不要进行直列造型，因此这是一种糟糕的做法：
style="position:absolute; top:0; left:0;"
所有“结束标记”必须有一个正斜杠，如下所示：
</body>
不是
关闭锚定标记，如下所示：
<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img"></a>
不是这个：
<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img">
建议（我理解您的问题。我已使用CSS Flexbox修复了格式问题
我在425px处添加了一个媒体查询，以支持除网格之外的列布局
您的代码中有几个小错误：
1） 结束html和正文标记的顺序相反，需要正斜杠才能结束。
2） 这个HTML文档中没有“head”，所以我添加了一个，并将CSS移到其中。
3） 虽然这不是必需的，但应该以正斜杠/结束自动关闭的HTML标记，例如img标记。
4） “a”标记需要结束标记。
以下是工作代码：
* {
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
保证金：0；
填充：0；
}
.项目{
位置：相对位置；
浮动：左；
边框：0px实心#333；
利润率：0%；
溢出：隐藏；
宽度：425px；
}
.项目img{
最大宽度：100%；
-moz转换：所有1；
-webkit转换：所有1；
过渡：所有1；
}
.项目：悬停img{
-moz变换：比例（1.1）；
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
.第1行，.第2行{
display:flex；/*这是项格式问题的修复程序*/
弯曲方向：行；
}
@媒体屏幕和屏幕（最大宽度：425px）{
.第1行，.第2行{
显示器：flex；
弯曲方向：立柱；
}
}
最终结果：
要记住的一件关键事情是，如果您希望任何元素是流体（响应性的），请尽量不要为其提供固定的宽度或高度
因此，我继续从标记中的图像标记中删除了width
和height
属性
要使图像标记流畅，请添加以下css规则：
img {
max-width: 100%;
}
第一个图像（gif）可以用作背景图像？因此，我们向前看，并在.main
容器中添加了background
属性
这使得第二个图像（png）很好地覆盖在顶部
现在，png图像已覆盖且流动。图像贴图区域都不合适，这通过使用
考虑到底部瓷砖在任何时候都是流动的，并确保每行只有3块瓷砖-增加了width:33%
至100/3
希望这有帮助☮
img {
max-width: 100%;
}