Question

抱歉我的英语不好。希望任何人都可以提供帮助。

我尝试实现以下目标：在页面内我有一个图像。由于它是在Wordpress中，非专业人士可以编辑它。我希望鼠标悬停在图像上以缩放框内图像的内容。（因此图像本身不应改变其大小。）即我有200 x 200像素的图像。鼠标悬停我希望它仍然有这个大小，但里面的内容应该缩放。图像大小可以不同。所以我从不知道exakt措施。

我认为必须在img-tag上完成。没有机会在它周围放置div或任何东西。有谁知道解决方案？

编辑：所以 - 我希望悬停时的图片更大，但要裁剪到非悬停状态的大小。

谢谢！麦克

Answer 1

将以下样式添加到.box。

overflow: hidden;

Answer 2

听起来你需要transform:scale

<强> HTML

<div class="box">
    <img src="http://lorempixel.com/output/city-q-c-200-200-1.jpg" alt=""/>
</div>

<强> CSS

.box {
    width:250px;
    height:250px;
    padding:10px;
    margin: 25px;
    border:1px solid grey;;
}


img {
    display: block;
    transition:all 0.25s ease;
}

.box:hover img {
    -webkit-transform:scale(1.25)
}

JSfiddle Demo

悬停时CSS缩放图像而不更改图像的框大小（仅缩放内容）

2 个答案: