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

Question

我有一张原始大小的图片：374x144。它是一个文件中的3images。所以我定义了一个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中移动它。