保持與CSS的高寬比（如果可能的話）

正如你可以在演示中看到，當你去「火箭浣熊」的形象，這一項的高度超過其他的。

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

的事情是，我想避免引入高度屬性的圖像或上面的類，所以我不知道我是否真的需要刪除最大高度或者我需要某種類型的jQuery函數來保持縱橫比。

任何幫助嘗試使圖像不會對高度尺寸變得瘋狂，關於自然圖像的大小，將是非常友善的你。

來源

2016-05-12 Cheshire

只是一個說明 - 如果你打算支持IE，不要在你的img上使用百分比'max-width'，相反，將這個代碼應用到它的父代，圖像使用'inherit'的值。 –

@LeoNapoleon謝謝，但目前它沒有計劃支持IE8（可能在未來），並且我知道繼承的價值，謝謝！ – Cheshire

也許這將是有益的：http://johnpolacek.github.io/imagefill.js/ – Julia

第一種方法：只有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：添加到您的腳本，在$（文件）結束。就緒（）函數：

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，並將最大寬度設置爲100％。我假設你想要全寬，除非它大於1280像素，因此我在演示中交換了這兩個值。

來源

2016-05-12 10:57:27 Siavas

謝謝！我正在通過jQuery函數方法來實現這一點。並再次感謝您可能給我的解決方案。 – Cheshire

嘗試使用max-height: 400px; margin: 0 auto; - 因爲我注意到其他圖像寬度爲400px，並且自動邊距將保持居中。如果你希望保持垂直居中，有許多方法可以實現這一目標，但自2016年以來，我認爲對於Flexbox - display: flex; align-items: center;對父母而言，你很好。

來源

2016-05-12 08:49:41

嗨。感謝您的回答，但寬度方面更寬的圖像不會覆蓋容器的全部寬度（這是計劃）。我可能不得不依靠jQuery/javascript函數來實現這一點，並進行方面/比率轉換。 – Cheshire

保持與CSS的高寬比（如果可能的話）

回答

相關問題