基于窗口宽度的尺寸和定位元素

我有个奇怪的问题。在我的页面上，我有一个重型星云中行星的主要图像。我有它的设置，所以最小宽度是1000px 和最大是1500px。我有两边渐渐消失，这看起来很大的屏幕。我想要做的是，当你在移动设备上看它的时候，它的宽度是1000像素，我想要的图像说，1300像素宽，居中和150像素被切断的每一边，所以你不能看到淡出，但仍然能够放大，窗口的宽度变得更大，就像一个大的 iMac，淡出，然后再次可见，一旦你通过了1300像素宽度。

我最初的想法是做一些负边距的东西，但我不能让这个工作，同时保持最大和混合宽度。

这就是页面中的特定代码部分，尽管 html 和 css 就在那里，每个人都可以看到，但是您可以使用这个好的命令来查找 div ID，以便进一步查找。

<div style="position:relative;width:100%;">
<div id="help" style="
position:relative;
z-index:1;
height:100%;
min-width: 1000px;
max-width: 1500px;
margin: 0 auto;
">
<img src="http://i.stack.imgur.com/tFshX.jpg" border="0" style="width:100%;">
</div>
</div>

任何关于这方面的想法，它非常接近工作的方式，我想它，只是需要一个小的调整。

347621 次浏览
小开

试试绝对定位:

<div style="position:relative;width:100%;">
<div id="help" style="
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index:1;">
<img src="/portfolio/space_1_header.png" border="0" style="width:100%;">
</div>
</div>
小开

一个好的技巧是使用内部框阴影，让它为你做所有的褪色，而不是应用到图像。

小开

现场演示

下面是您所描述的实际实现。我使用最新的最佳实践重写了您的代码。如果你在 1000px下调整浏览器窗口的大小，图片的左边和右边将使用负边距裁剪，它将是 300px更窄。

<style>
.container {
position: relative;
width: 100%;
}


.bg {
position:relative;
z-index: 1;
height: 100%;
min-width: 1000px;
max-width: 1500px;
margin: 0 auto;
}


.nebula {
width: 100%;
}


@media screen and (max-width: 1000px) {
.nebula {
width: 100%;
overflow: hidden;
margin: 0 -150px 0 -150px;
}
}
</style>


<div class="container">
<div class="bg">
<img src="http://i.stack.imgur.com/tFshX.jpg" class="nebula">
</div>
</div>
小开

CSS 的视图单元

1vw = 1% of viewport width
1vh = 1% of viewport height

这样，您就不必编写许多不同的媒体查询或 javascript。

如果你更喜欢 JS

window.innerWidth;
window.innerHeight;
小开 
html, body {
height: 100%;
width: 100%;
}


html {
display: table;
margin: auto;
}


body {
padding-top: 50px;
display: table-cell;
}


div {
margin: auto;
}

这将居中对齐对象，然后居中对齐其中的项目，以居中对齐不同宽度的多个对象。

示例图片

小开

另一个简单的技巧是设置一个最大宽度并将宽度设置为100% :

.container{
max-width: 1500px; //(max of your screen/big screen)
width: 100%; // important for responsive;
overflow: scroll;

提交答案