CSS流體寬度中心圖像與屏幕外區域

嗨，大家好。關於圖中佈局如何實現的任何想法？ 3幅等寬的圖像，中間圖像居中在視口中，最大寬度爲1200px。

其他兩個側面圖像部分顯示在屏幕上。

當瀏覽器窗口縮小到1200px以下時，中心圖像會填滿屏幕並隨窗口寬度向下縮放。

難以用CSS來實現這一目標！

謝謝！

來源

2017-09-18 Nick

這些*實際*圖像或背景圖像。 –

只要達到最終效果，他們就可以！ – Nick

這是靜態還是圖像會移動？ –

沿着max-width，您可以使用flex和justify-content。

上:hover和shadow動畫被添加到樣品中，以顯示行爲

#layout { 
 
    max-width: 1200px; 
 
    width: 100%; 
 
    margin: auto; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
#layout img { 
 
    min-width: 100%; 
 
    max-width: 100%; 
 
} 
 

 

 
/* demo purpose */ 
 

 
#layout { 
 
    border: solid; 
 
    box-shadow: 0 0 0 50vw rgba(255, 255, 255, 0.5) 
 
} 
 

 
#layout img { 
 
    position: relative; 
 
    z-index: -1; 
 
} 
 

 
#layout:hover img:first-of-type { 
 
    animation: slide 6s infinite steps(3); 
 
} 
 

 
@keyframes slide { 
 
    from { 
 
    margin-left: 200%; 
 
    } 
 
    to { 
 
    margin-left: -400%; 
 
    } 
 
} 
 

 
body { 
 
    overflow-x: hidden 
 
}

<div id="layout"> 
 
    <img src="http://lorempixel.com/600/200/food" /> 
 
    <img src="http://lorempixel.com/600/200/people" /> 
 
    <img src="http://lorempixel.com/600/200/fashion" /> 
 
</div>

來源

2017-09-18 19:21:53

感謝您的解決方案！這幾乎正是我想要的，除了圖像的高度在縮小時不按比例縮放。另外，我寧願不使用flex來獲得更好的瀏覽器支持（儘管我沒有在這個問題中提到這個問題，但完全是我的錯！）。我一直在試驗，因爲我張貼並找到了另一個解決方案，我將發佈在 – Nick

以下@尼克你可以刪除柔性並添加空白：nowrap，然後在第一張圖片上留下餘量。 flex做到了把注意力集中在自己身上。這是一個例子，如果你願意。 https://codepen.io/gc-nomade/pen/XeXgOB斷點也可以通過mediaquerie添加 –

我發現後進行一些試驗中的溶液。關鍵是意識到，在1200像素以下，側面圖像在屏幕上根本不可見，因此可以完全隱藏 - 僅將中心圖像設置爲100％。

因此，將所有3張圖像都放在3600像素寬的絕對放置的容器中，並將其居中放置50％，margin-left-1800px;

在1200像素以下，將圖像2和3完全隱藏並使容器相對定位在100％的寬度。

來源

2017-09-18 19:56:21 Nick

CSS流體寬度中心圖像與屏幕外區域

回答

相關問題