html– 将图像水平放置在中心位置,使高度为视口的100％

概述我有一个占据视口整个高度的图像.图像高度应跨越整个视口高度(100％),以便它适合于从中查看的屏幕(此处已完成),并且宽度应与高度成比例.正如您在我的页面(http://lamininbeauty.co.za)中看到的那样,页面两侧有空格.我希望图像水平居中.以下是我的代码：CSS：body{ margin: 0px; padding: 0p

我有一个占据视口整个高度的图像.图像高度应跨越整个视口高度(100％),以便它适合于从中查看的屏幕(此处已完成),并且宽度应与高度成比例.正如您在我的页面(http://lamininbeauty.co.za)中看到的那样,页面两侧有空格.我希望图像水平居中.以下是我的代码：

CSS：

body{    margin: 0px;    padding: 0px;    overflow: hIDden;}#main{    margin: auto;}img.bg {        /* Set rules to fill background */        max-height: 100%;        /* Set up proportionate scaling */        height: auto;        /* Set up positioning */        position: fixed;}

HTML：

注意：我不希望图像丢失宽高比,它应该始终垂直适合100％,没有图像被截断,也没有垂直滚动. Horizntal居中.我试图远离background-size属性,因为ie8及更低版本不支持它.最佳答案只需添加左：0;右：0;边距：0自动;到img.bg(example)：
body{    margin: 0px;    padding: 0px;    overflow: hIDden;}#main{    margin: auto;}img.bg {    /* Set rules to fill background */    max-height: 100%;    /* Set up proportionate scaling */    height: auto;    /* Set up positioning */    position: fixed;    /* Align horizontally */    left:0;    right:0;    margin:0 auto;   }
替代方案
如果您希望图像永远不会被切断(水平或垂直),并始终居中,请尝试使用此代码(从https://stackoverflow.com/a/6284195/526741开始)：
/* Don't Change - positioning */.absoluteCenter { margin:auto; position:fixed; top:0; bottom:0; left:0; right:0;}/* Sizing */img.absoluteCenter { max-height:100%; max-wIDth:100%;}
> Wide image
> Tall image
> Small image          总结       
以上是内存溢出为你收集整理的html  – 将图像水平放置在中心位置,使高度为视口的100％全部内容，希望文章能够帮你解决html  – 将图像水平放置在中心位置,使高度为视口的100％所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1125813.html