保持寬高比爲100％（CSS中的裁剪溢出）

我正在處理全屏幕背景幻燈片。保持寬高比爲100％（CSS中的裁剪溢出）

我的問題是：如何設置圖像佔用全屏幕並保持縱橫比？

最小高度和最小寬度的工作，但不設置長寬比。我希望將圖像裁剪爲容器的全面覆蓋。

Diagram of Problem

我相信我需要有一個尺寸固定，另一個爲自動;考慮到圖像尺寸和視圖端口尺寸是可變的，我想我至少需要2套CSS規則，而javascript要計算應該使用哪一種。有沒有更簡單的方法來做到這一點？

我制定了一個圖解說明我的問題。深色是原始圖像。中等顏色是理想的效果。較亮的顏色是放大圖像所需的溢出。

我正在研究肯 - 伯恩斯效應全屏幕背景。我知道我不得不擔心轉換，但我希望我能在之後處理。

教程Ken Burns效果：
http://cssmojo.com/ken-burns-effect/

解決：感謝馬駒我介紹給背景蓋。將圖像更改爲div，並將Ken Burns代碼上的javascript + css從圖像更改爲div。效果很好。該腳本更改元素類，因此您必須以其他方式使用Maju的CSS或更改腳本。

來源

2016-08-23 Laxo

使用'min-height'和'min-width'實際上應該保持比例，你確定沒有定義寬度或高度嗎？ – Simon

@Simon你說得對。原來我確實有高度也設置爲自動。當我移除它時，它看起來像是在窗口分辨率很高時保持比例，但是當我縮小它的比例時，一些圖像仍然是垂直拉伸的。我會繼續測試這個。 – Laxo

https://jsfiddle.net/464dewrz/1/ 看起來像使用最小高度和最小寬度確保比例。我不確定哪些CSS與此衝突。 – Laxo

如果您將在css background-image中使用圖像，您可以設置任何元素的背景大小。如果我理解你的權利，你需要的東西，如：

.background { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-repeat: no-repeat !important; 
 
    background-position: 0 0 !important; 
 
    background-attachment: fixed !important; 
 
    -webkit-background-size: cover !important; 
 
    -moz-background-size: cover !important; 
 
    -o-background-size: cover !important; 
 
    background-size: cover !important; 
 
}

<div class="background" style="background-image: url(http://www.jurosko.cz/images/stackoverflow.png)"></div>

封面將影響方式，它總是會覆蓋正確的縱橫比整個元素圖像。

還有新的css樣式，但它在IE/ME中不起作用。

https://css-tricks.com/almanac/properties/o/object-fit/

爲此，我建議使用與背景圖像的div。

來源

2016-08-23 21:37:04 Maju

這工作。謝謝Maju。 – Laxo

嘿，我剛剛發現不同的解決方案，因爲我需要img，因爲SEO和背景圖像不是我的解決方案（新聞圖像）。最後發現一些非常有趣的東西： http://stackoverflow.com/questions/11670874/is-there-an-equivalent-to-background-size-cover-and-contain-for-image-elements 尤其是解決方案2真的幫我解決了很大的問題:)你可以用src來顯示img，但是可見的將是background-image。 – Maju

保持寬高比爲100％（CSS中的裁剪溢出）

回答

相關問題