javascript - Javascript如何同时调整图像大小和剪辑图像？

Question

我有一张原始尺寸的图像：374x144。它是一个文件中的 3 张图像。所以我定义了一个 div 标签来获取一张图片：

<div style="background-image:url('http://pics.kapihospital.de/ga_cars.5.jpg');position:absolute;height:48px;width:374;background-position: 0px -96px;"></div>

现在我想调整 image/div 标签的大小。但是当我改变高度和属性时，我得到一个改变的剪辑部分而不是一个调整大小的图像。

可以同时裁剪和放大图像吗？新尺寸应该在 179x23 左右

Answer 1

您应该使用实际的图像标签来调整大小并使用某种包装器来进行剪裁（我使用了 div）。

HTML

<div>
    <img src="http://pics.kapihospital.de/ga_cars.5.jpg" width="179" height="69">
</div>​​​​

CSS

DIV {
    width: 179px;
    height: 23px;
    overflow: hidden;
}

IMG {
    position: relative;
    top: -23px;
}

您可以position: relative在图像上使用并在div使用负top属性时将其移动。