2

如何制作流畅的图像，但要使用我自己决定的宽高比？（让我们说 16:9）
我已经让它变得流畅，max-width: 100%;但我不能改变纵横比。

注意：图像在大多数情况下具有不同的纵横比。

4

3 回答 3

9

您可以将图像包装在两个容器中。给一个容器height:0和一个padding-top你想要的图像高度与宽度成比例的百分比。因此，对于宽度的 50% 的高度，请使用padding-top:50%和height:0，正如这里所解释的那样，它将使高度与宽度成 50% 成正比。

.wrapper {padding-top:50%;height:0;position:relative;}

在该容器内，放置另一个具有以下样式的容器：

.inner{position:absolute;left:0;top:0;right:0;bottom:0;}

现在只需将您的图像放在内部容器中并给它width:100%和height:100%

见小提琴： http: //jsfiddle.net/henrikandersson/PREUD/1/ （更新了小提琴）

于 2012-07-09T18:13:36.497 回答
1

我在另一篇文章中找到了这段代码：

例子

CSS

.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }

JavaScript

var getAspect = function(){
    var h = window.innerHeight;
    var w = window.innerWidth;
    var aspect = w / h;

    var 43 = 4 / 3;
    var cssClass = "";

    if (aspect > 43) {
        cssClass = "widescreen";
    }
    else if (aspect === 43) {
        cssClass = "43";
    }
    else {
        cssClass = "portrait";
    }

    $("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};

var checkAspect = setInterval(getAspect, 2000);
于 2012-07-09T16:39:04.993 回答
-1

它可能需要在 HTML 中添加额外的标记，但您可以使用 CSS Clip 属性将图像的可见部分剪切为您想要显示的内容。https://developer.mozilla.org/en/CSS/clip

于 2012-07-09T16:53:45.100 回答