Javascript 如何缩小html容器中的图像

我在一个div标签的旁边有一个html表，它位于html页面的主体中。我在表的一个td元素中有一个图像。我的要求是，当我将鼠标移到td元素上的图像上时，缩小图像（与大多数电子商务网站一样）

我找到了代码并且能够做到。但问题是，它仅限于

容器，不能缩小其他部分

这是我的

标签-

<td colspan="4"><img class ="blog" src="shirt.jpg" alt="Item" border='3' height='390' width='638'/></td>

---

屏幕截图。

添加

位置：绝对至
。博客：悬停

确保img的父对象已设置其位置或绝对位置，以便图像不会显示在页面的某些不需要的部分

.blog:hover {
    postion:absolute;
    top:0;
    left:0;
    cursor: pointer;
    height:475px;
    width: 350px;
    transform:scale(1.5);
    -ms-transform:scale(1.5); /* IE 9 */
    -moz-transform:scale(1.5); /* Firefox */
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -o-transform:scale(1.5); /* Opera */
    overflow: auto;
}

我要把这把小提琴当作一个主意扔掉

我只是不确定你想要的功能。概念是否在某物上悬停，并且可以看到更大的画面

CSS

尝试设置溢出：图像外部td元素的自动。已尝试。这没有帮助：（.
.tdflow{overflow:auto；}
你期望图像有什么行为？图像是否应该超出边界？检查这个小提琴：这正是我需要的Nix。但是smhow无法让它工作。也尝试了z索引。
.blog:hover{光标：指针；高度：475px；宽度：350px；z-index:999；转换：缩放（1.5）；-ms转换：缩放（1.5）；/*IE 9*/-moz转换：缩放（1.5）；/*Firefox*/-webkit转换：缩放（1.5）；/*Safari和Chrome*/-o-transform:scale（1.5）；/*Opera*/}
添加了更多细节的屏幕截图。希望有帮助。天知道问题出在哪里。它也没有帮助：（。
博客：hover{position:absolute；cursor:pointer；height:475px；width:350px；z-index:999；transform:scale（1.5）；-ms-transform:scale（1.5）；/*IE 9*/-moz-transform:scale（1.5）；/*Firefox*/-webkit transform:scale（1.5）；/*Safari和Chrome*/-o-transform:scale（1.5）；/*Opera*/overflow:auto；}
Parent TD
.tdflow{overflow:auto；postion:relative；}
TD Parent DIV
包含DIV{背景色：66666677；.font:10pt Arial，Helvetica；overflow:auto}.mpd1{；position:absolute}
出于某种原因
溢出：div标记中的auto
导致了它。删除它并替换为
z-index:999；
并且它工作了：）。谢谢你的帮助。向上投票！！它被放大了，但不在顶部，即不隐藏另一个div元素。有什么建议吗？你说得对，蒂姆。这正是我需要的。让我试试这个。如果你想把图像放大到悬停图像的顶部，你不需要支架。哦，好的。这是个好主意。我想知道js的使用是否正确我可以提供更多的功能。我将使用一个提琴。这里有一个使用jquery的提琴，它提供了更多的“易编码性”。你可以使用一个“放大”div，或者在原始图像旁边有一个弹出窗口。
.blog:hover {
    postion:absolute;
    top:0;
    left:0;
    cursor: pointer;
    height:475px;
    width: 350px;
    transform:scale(1.5);
    -ms-transform:scale(1.5); /* IE 9 */
    -moz-transform:scale(1.5); /* Firefox */
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -o-transform:scale(1.5); /* Opera */
    overflow: auto;
}

.photo img {
    width: 100px;
    height: 100px;
    transition: all 1s;
}
.holder {
    width: 200px;
    height: 200px;
    text-align: center;
    margin: 20px auto;
    position: relative;
}
.fixeddiv {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    display: none;
    position: absolute;
    top: 10px;
    left: 200px;
    transform:scale(1);
}
.photo:hover  .fixeddiv {
    display: block;
    }
.photo:hover  .fixeddiv img {
    display: block;
    width: 200px;
    height: 200px;
}