使用CSS縮放img

我正在嘗試使用css進行特定縮放。下面的是我之後的圖片。該圖像距瀏覽器頁面頂部300px。上面會是靜態測試。
我希望文本下方的圖像與瀏覽器成比例地縮放。保持所有圖像完好無損，並且不切斷底部或不得不滾動圖像的底部。使用CSS縮放img

下圖是瀏覽器窗口的圖示。瀏覽器還可以選擇全屏顯示，以便能夠縮放。

我曾嘗試在img標籤上使用寬度100％和高度自動調整，但這並不完全是我所追求的。

下面的代碼種類的作品，但後來當我移動圖像讓位的頂部文本圖像的底部被切斷。我需要這個擴展到瀏覽器底部。

#photo-container{ 
    margin-top: 200px; 

    img{ 
     min-height: 720px; 
    max-height: 100%; 
    height: 100%; 
    width: auto; 
    } 
}

如果用CSS不可能有js選項嗎？

enter image description here

來源

2014-04-05 Chapsterj

所以，你要寬規模，但沒有的高度？ – CMPS

可能有用：http://css-tricks.com/perfect-full-page-background-image/ + http://paper-leaf.com/blog/2012/04/4-solutions-for-full- screen-background-images/ – JohanVdR

我希望這兩個比例。因爲如果寬度和高度不一致，那麼它就不會成比例。至少我不這麼認爲。 – Chapsterj

規模比例

background-image: url(oneimage.jpg); 
/*background-attachment: fixed;*/ 
top: 0px; 
left: 0px; 
background-size: cover; 
background-position: 50% 50%; 
background-repeat: none;

來源

2014-04-05 20:07:52 AvrilAlejandro

任何方式沒有起訴背景圖像。我正在做幻燈片。所以我希望能夠改變img標籤。 – Chapsterj

對於有此同樣的問題是任何人都圍繞我如何到達。不知道我能用CSS來做到這一點。

HTML

<div id="photo-container"> 
     <img src="img/bla.jpg"/> 
    </div>

CSS

#photo-container{ 
    position:relative; 
    top: 200px; 
    overflow: hidden; 
    text-align: center; 

    img{ 
    max-height: 100%; 
     max-width: 100%; 
    width: auto; 
    } 
}

$(document).ready(function(){ 
    var photoContainer = $('#photo-container'); 
    var top = photoContainer.position().top; 

    $(window).on('resize', function(){ 
     var browserH = $(window).height(); 
     photoContainer.height(browserH - top); 
    }); 

    $(window).trigger('resize'); 

});

來源

2014-04-06 17:18:20 Chapsterj

使用CSS縮放img

回答

相關問題