保持 CSS 的纵横比（如果可能）

Question

我的身高图片有点问题。

正如您在演示中看到的那样，当您转到 "rocket raccoon" 图片时，这张图片的高度超过了其他图片。

.gallery-elements .gallery-image-big {
    position: relative;
}
.gallery-elements .gallery-image-big img {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 600px;
}

问题是，我想避免在图像或上面引入高度属性 class，所以我不知道我是否真的需要删除最大高度或者我需要某种 jQuery 函数来保持 aspect/ratio.

任何帮助尝试使图像不会在高度尺寸上变得疯狂，关于自然图像的尺寸，将非常感谢你。

Answer 1

尝试在您的图像上使用 max-height: 400px; margin: 0 auto; - 因为我注意到其他图像的宽度为 400 像素，自动边距将使图像保持居中。如果你希望它也保持垂直居中，有很多方法可以实现这一点，但因为现在是 2016 年，我会说选择 Flexbox - display: flex; align-items: center; on parent 并且你很高兴。

Answer 2

第一种方法：仅 CSS（不可取）

.gallery-elements .gallery-image-big {
    position: relative;
    height: 230px; /* Setting fixed height will not keep an aspect ratio */
    overflow: hidden; /* Hide the images additional height */
}
.gallery-elements .gallery-image-big img {
    position: absolute; /* Centering images and keeping their aspect ratio */ 
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 600px;
}

第二种方法：jQuery和CSS（可靠但不完美）

CSS：再次以绝对位置居中图像，并将包含 div.

的溢出设置为隐藏

.gallery-elements .gallery-image-big {
    position: relative;
    overflow: hidden;
}
.gallery-elements .gallery-image-big img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: block;
    margin: auto;
    max-width: 100%;
}

jQuery：将此添加到您的脚本中，在 $(document).ready() 函数的末尾：

var sliderw = $('.gallery-image-big').width();
$('.gallery-image-big').css({
    'height': sliderw / 1.777
});

根据宽度设置高度 - 宽度 divid 除以 1.777 的结果是 16:9 的纵横比，这是现在最常用的。

正在检查 http://jshint.com/, you had some missing semicolons. This new demo 是否已修复。

我将其描述为 "not perfect"，因为它只会运行函数一次，这意味着当 window 调整大小时，宽高比将不会保留。

除此之外，您已将父 div 的宽度设置为 1280px，并将最大宽度设置为 100%。我假设你想要全宽，除非它大于 1280px，因此我在演示中交换了这两个值。

保持 CSS 的纵横比（如果可能）

Keeping aspect ratio with CSS (if possible)

css

size

jquery

image