使用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

回答

相关问题