如何从 html 容器中缩小图像

Question

我在 html 页面正文中的 div 标签旁边有一个 html 表格。我在表的 td 元素之一中有一个图像。当我将鼠标悬停在 td 元素上的图像上时，我的要求是缩小图像（就像在大多数电子商务网站中一样）。

我找到了代码并且能够做到。但问题是它仅限于<td><div> 容器，并且不会缩小其他部分。

这是我的<td> 标签-

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

这是 CSS -

.blog:hover {
    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;
}

截图here.

Answer 1

我会把这个提琴作为一个想法扔掉 - FIDDLE。

我只是不确定您想要的功能。将鼠标悬停在某物上的概念是否可以看到更大的画面？

CSS

.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;
}

Answer 2

将postion:absolute; 添加到.blog:hover

确保 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;
}