垂直收缩图像

Question

我有一个形象，我想使高度的75%，它将是正常的。我使用的是响应式布局，所以不能使用固定的像素高度，等等。这不会作为背景图像工作，所以我想知道是否有类似于使用background-size: 100% 75%;的效果，但它可以在img标签上工作？我想只使用CSS来实现这一点。

编辑：

示例：https://jsfiddle.net/x9n0t4bu/

HTML：

<div id="disp">
                <a href="google.com"><img src="http://wowslider.com/sliders/
demo-10/data/images/dock.jpg"></a>
            </div>

CSS：

#disp{
    margin-top:-17.9px;
    width: 100%;
}

#disp img{
    width:100%;
}

Answer 1

您可以使用transform: scale，这将使图像的大小为其原始大小的75%。

-webkit-transform: scale(0.75); /* Saf3.1+, Chrome */
-moz-transform: scale(0.75); /* FF3.5+ */
-ms-transform: scale(0.75); /* IE9 */
-o-transform: scale(0.75); /* Opera 10.5+ */
transform: scale(0.75);

​

#disp{
    margin-top:-17.9px;
    width: 100%;
}

#disp img{    
    -webkit-transform: scale(1, 0.75); /* Saf3.1+, Chrome */
    -moz-transform: scale(1, 0.75); /* FF3.5+ */
    -ms-transform: scale(1, 0.75); /* IE9 */
    -o-transform: scale(1, 0.75); /* Opera 10.5+ */
    transform: scale(1,0.75);
    width:100%;
}

<div id="disp">
                <a href="google.com"><img src="http://wowslider.com/sliders/
demo-10/data/images/dock.jpg"></a>
            </div>

​