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>

垂直缩小图像

1 个答案: