0

所以我发现的最后一个问题是相似的，从2010 年开始

我有一张 1920 像素宽的图片。我让它从左右按比例调整大小。但是，如果分辨率小于 1280，我需要它停止调整大小，并且如果 res > 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>
4

3 回答 3

4

设置min-width: 1280px;然后它应该停止在 1280px 处调整大小。

于 2013-10-22T12:15:55.700 回答
1

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

也许您可以更改它以满足您的需求。

于 2013-10-22T12:20:09.330 回答
0

感谢 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% */
  }
}
于 2013-10-22T12:45:52.763 回答