Question

我在html页面的正文中有一个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

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

Answer 2

我会把这个小提琴作为一个想法 - 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;
}

如何从html容器中缩小图像

2 个答案: