Question

所以我发现的最后一个问题是类似的，来自2010

我有1920像素的照片。我从左到右按比例调整大小。但我需要它停止调整大小，如果分辨率小于1280并且只是切割它（左/右）两侧并保持居中，如果res＆gt; 1280。

.mainImg {
  position: absolute;
  height: 558px;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

我想我需要一个隐藏溢出的包装器，我尝试了一堆选项，但没有一个工作。

可能有人已经知道解决方案吗？我将非常感激！

 <body>
    <div class="container">
      <!-- Main part of the webpage -->
        <img src="img/main_01.jpg" class="mainImg shadow" alt="seo matters" />
    </div> <!-- /container -->
  </body>

Answer 1

设置min-width: 1280px;然后它应该停止调整为1280px。

Answer 2

这对我有所帮助，http://css-tricks.com/perfect-full-page-background-image/

也许你可以改变它以满足你的需求。

Answer 3

感谢Tom Chew-head Millard的链接。这个（编辑过的）代码按我想要的方式工作。

 img.mainPic {
  /* Set rules to dimensions */
  min-height: 100%;
  min-width: 1280px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1280px) { /* Specific to this particular image */
  img.mainPic {
    left: 50%;
    margin-left: -640px;   /* 50% */
  }
}

如果屏幕分辨率小于1280，则裁剪图像

3 个答案: