比屏幕大的中心图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了比屏幕大的中心图像相关的知识，希望对你有一定的参考价值。
我附上我的页面外观图。页面的宽度为980px，图像的宽度几乎为1200px。我要实现的是使页面居中并显示尽可能多的图像，同时还要使图像居中。我试图绝对定位图像，但是在移动设备上，浏览器页面设置为图像的宽度，内容未居中。
基本上，可能有一些屏幕无法向用户显示整个图像，而只能显示适合屏幕的大小。
CSS：
.page_container
width: 980px;
margin: 0 auto;
.image
position: absolute;
left: 0;
right: 0;
html：
<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>
<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9OdDJ3Sy5wbmcifQ==” alt =“在此处输入图像描述”>
答案
请使用position：相对于图像。像这样：
<div class="page_container">...</div>
<div class="image"><img src="http://g.hiphotos.baidu.com/album/w%3D210%3Bq%3D75/sign=3584477cf636afc30e0c386483229af9/caef76094b36acaf18169c407dd98d1000e99c93.jpg" width=1200 height=200 /></div>
<div class="page_container">...</div>
css代码：
.page_container
width: 980px;
margin: 0 auto;
background: orange;
.image
position: relative;
left: 50%;
margin-left: -600px;
左边距等于img的宽度/ 2。请查看demo。
另一答案
您可以尝试这个
<div class="popup">
<div class="wrapper">
<img src="http://farm4.staticflickr.com/3721/8826906676_501192b1c4.jpg">
</div>
</div>
CSS：
.popup
position:fixed;
left:50%;
.popup .wrapper
position:relative;
left:-50%;
/*popup-styles*/
background-color:#fff;
padding:10px;
border:solid 2px #444;
border-radius:10px;
htmlbackground-color:#aaa;
示例：jsfiddle
另一答案
.image
position:absolute;
left:50%;
margin-left:-600px; // half of image width
另一答案
您可以尝试这种方式：
HTML：
<div class="wrapper">
<div class="image">
<img src="img/img.jpg">
</div>
</div>
JS：
<script>
$(document).ready(function()
$('div.image').each(function()
var imageSrc = $(this).find('img').attr('src');
$(this).css('background', 'url(' + imageSrc + ') center top no-repeat');
);
);
</script>
CSS：
.wrapper
float: left;
width: 100%;
overflow: hidden;
.wrapper .image img
visibility: hidden;
另一答案
轻松居中<img />标签的方法。
body
margin: 0;
.warpper
max-height: 100vh;
overflow: hidden;
.warpper img
max-height: 100%;
margin-left: 50%;
transform: translateX(-50%);
<div class="warpper">
<img src="https://i.stack.imgur.com/gkOwi.jpg" />
</div>另一答案
background-size：auto;
为此图片设置此属性
另一答案
尝试一下：-
.image
position: absolute;
left: -50%;
我认为它将适用于较大的图像...
另一答案
。image 位置：绝对；左：-50％;
以上是关于比屏幕大的中心图像的主要内容，如果未能解决你的问题，请参考以下文章