根據 window 寬度調整和定位元素

Question

我有一個奇怪的問題。 在我的頁面上，我有一個 pl.net 在一些重型星雲中的主圖像。 我已將其設置為最小寬度為 1000 像素，最大寬度為 1500 像素。 我讓兩側逐漸淡出，這在大屏幕上看起來很棒。 我想嘗試做的是，例如當您在移動設備上查看它時，它會將寬度截斷為 1000 像素，我希望圖像顯示為 1300 像素寬、居中並截斷 150 像素關閉每一側，所以您根本看不到淡出，但仍然可以放大，因為窗口的寬度變大，就像大型 iMac 一樣，一旦您超過 1300 像素寬度，淡入淡出就會再次可見。

我最初的想法是做一些兩邊都有負邊距的事情，但我無法在保持最大和混合寬度的同時讓它工作。

這是頁面中的特定代碼部分，雖然 html 和 css 就在那里供所有人查看，但您可以使用 fine 命令找到該 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>

對此有任何想法，它非常接近我希望的工作方式，只需要稍作調整。

Answer 1

CSS 的視口單位

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

這樣，您就不必編寫許多不同的媒體查詢或 javascript。

如果你更喜歡 JS

window.innerWidth;
window.innerHeight;

Answer 2

現場演示

這是您所描述內容的實際實現。 我使用最新的最佳實踐稍微重寫了您的代碼以實現它。 如果您將瀏覽器 windows 調整為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>

Answer 3

嘗試絕對定位：

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

Answer 4

一個好的技巧是使用內部框陰影，讓它為您完成所有淡化，而不是將其應用於圖像。

Answer 5

另一個簡單的技巧是設置最大寬度並將寬度設置為 100%：

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

Answer 6

html, body {
    height: 100%;
    width: 100%;
}

html {
    display: table;
    margin: auto;
}

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

div {
    margin: auto;
}

這將居中對齊對象，然后居中對齊其中的項目以居中對齊具有不同寬度的多個對象。

示例圖片