实施例

Question

我如何创建一个流畅的图像，但我决定使用宽高比？（比如说16：9）
我已经用max-width: 100%;使它流畅，但我无法改变宽高比。

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

Answer 1

您可以将图像包装在两个容器中。为一个容器height:0和一个padding-top提供您想要的图像高度与宽度成比例的百分比。因此，对于宽度的50％的高度，使用padding-top:50%和height:0，正如解释here - 将使宽度与宽度成比例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/ （更新小提琴）

Answer 2

我在another post上找到了这段代码：

实施例

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);

Answer 3

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

Css改变流体图像的纵横比

3 个答案:

实施例

CSS

的JavaScript