使用比CSS中的頁面大的頁面縮放圖像

當頁面/畫面的寬度發生更改時，我想要調整圖像大小。使用比CSS中的頁面大的頁面縮放圖像

此代碼幾乎沒有什麼我想：

.section 
{ 
    position:relative; 
    min-width:600px; 
    max-width:1200px; 
    height:auto; 

    margin-left:auto; 
    margin-right:auto; 
    overflow: hidden; 
} 

.image 
{ 
    position:relative; 
    display:inline-block; 
    vertical-align:top; 

    width:100%; 
    height:auto; 
} 

<div class="section"> 
    <img src="long_img.jpg" class="image"/> 
</div>

的問題是，圖像2560px寬，節僅1200像素。圖像被水平壓扁以適應高度。但是，當頁面處於最大寬度（1200）時，我希望圖像處於全高（400）。所以我需要圖像懸掛在邊緣，但仍然會自動調整大小。

我不只是裁剪圖像的原因是因爲我想用css動畫滾動它。我試過.image{ margin-right:-1360; }但它沒有效果。

來源

2014-11-03 bitwise

我不明白「我需要圖像掛在邊緣」。你能解釋一下嗎？ – JakeParis 2014-11-03 21:30:09

圖像的寬度是頁面/ div的最大寬度的2倍，因此對於瀏覽器窗口中可見的圖像部分爲100％，圖像必須懸掛在窗口的邊緣。 – bitwise 2014-11-03 21:32:31

所以你想要顯示圖像的左半部分，並根據div的大小縮放那一半？然後動畫圖像顯示圖像的右半部分？ – RMo 2014-11-03 22:30:09

在您擁有的CSS後使用媒體查詢。這將刪除100%聲明並讓圖像成爲自然大小。

@media(min-width:1200px) { 
    .section img { 
     width: auto; 
     display: block; 
    } 
}

另外，從包含的div中拿走overflow:hidden。

See this fiddle for an example。

來源

2014-11-03 21:34:23 JakeParis

所有這些似乎當窗口縮小到1200像素以下時，做的是將圖像捕捉到適合寬度的方向 – bitwise 2014-11-03 21:37:23

這不是你想要的嗎？你想要什麼不同的行爲？ – JakeParis 2014-11-03 21:38:21

例如：http：//picpaste.com/example-ImqPP0m2.jpg - 圖片掛起，但仍然調整頁面大小 – bitwise 2014-11-03 21:46:06

使用比CSS中的頁面大的頁面縮放圖像

回答

相關問題