如果屏幕分辨率小於1280，則裁剪圖像

Question

所以我發現的最后一個問題與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>

Answer 1

設置min-width: 1280px; 那么它應該停止在1280px處調整大小。

Answer 2

這對我有所幫助， http://css-tricks.com/perfect-full-page-background-image/

也許您可以更改它以滿足您的需求。

Answer 3

感謝Tom Chew負責人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 個解決方案

解決方案1
4 2013-10-22 12:15:55

解決方案2
1 已采納 2013-10-22 12:20:09

解決方案3
0 2013-10-22 12:45:52

如果屏幕分辨率小於1280，則裁剪圖像

問題描述

3 個解決方案

解決方案1 4 2013-10-22 12:15:55

解決方案2 1 已采納 2013-10-22 12:20:09

解決方案3 0 2013-10-22 12:45:52

解決方案1
4 2013-10-22 12:15:55

解決方案2
1 已采納 2013-10-22 12:20:09

解決方案3
0 2013-10-22 12:45:52