69

我有一个奇怪的问题。在我的页面上，我有一张位于某个重型星云中的行星的主要图像。我已经设置好了，最小宽度是 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>

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

4

6 回答 6

135

CSS 的视口单位

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

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

如果你更喜欢 JS

window.innerWidth;
window.innerHeight;
于 2016-02-06T03:43:01.547 回答
10

现场演示

这是您所描述的实际实现。我使用最新的最佳实践来重写你的代码。如果您在 下调整浏览器窗口的大小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>
于 2013-09-03T22:53:59.947 回答
7

尝试绝对定位：

<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>
于 2012-04-09T15:33:20.763 回答
5

一个很好的技巧是使用内部盒子阴影，让它为你做所有的淡入淡出，而不是把它应用到图像上。

于 2012-04-09T17:18:43.440 回答
1 
html, body {
    height: 100%;
    width: 100%;
}

html {
    display: table;
    margin: auto;
}

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

div {
    margin: auto;
}

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

示例图片

于 2020-01-16T18:07:24.457 回答
1

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

.container{
max-width: 1500px; //(max of your screen/big screen)
width: 100%; // important for responsive;
overflow: scroll;
于 2021-04-30T10:08:48.753 回答