Question

我在这里有一些关于高度图像的问题。

正如你在演示中看到的，当你去“火箭浣熊”的图像时，这个图像的高度超过了其他图像。

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

问题是，我想避免在图像或上面的类中引入height属性，所以我不知道我是否真的需要删除那个max-height或者我需要某种jQuery保持宽高比的功能。

任何帮助尝试使图像不会因高度大小而疯狂，关于自然图像的大小，对你来说非常好。

Answer 1

第一种方法：仅限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
});

根据宽度设置高度 - 宽度除以1.777的结果是宽高比为16：9，这是目前使用最多的。

使用http://jshint.com/进行检查时，您丢失了一些分号。这个new demo修复了它们。

我将此描述为“不完美”，因为它只运行一次该函数，这意味着当调整窗口大小时，不会保留纵横比。

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

Answer 2

尝试使用php --ini | grep /php.ini - 因为我注意到其他图像的宽度为400px，自动边距会使其居中。如果你希望将它保持垂直居中，有很多方法可以达到这个目的，但是从2016年开始，我会说父亲会选择Flexbox - max-height: 400px; margin: 0 auto;并且你很高兴。

保持与CSS的宽高比（如果可能）

2 个答案: