Question

我正在使用Bootstrap，我的页面顶部有一个横幅（1920 * 250px）。横幅是响应式的（使用.img-responsive）在小屏幕（sm和xs）上虽然我想切掉两边，使横幅的新底宽为1140px（~~我想保持基本高度为250px~~ 我希望图像表现得像它是1140 * 250px并仍然响应），但我不知道该怎么做。
我会感激任何帮助。

编辑：这是对我想要的更好的解释：
我的横幅是1920 * 250px大。它包含一个包含徽标的中心部分（1140 * 250px），我希望此部分始终完全可见，横幅的布局大致如下：http://i.imgur.com/kNBqEGD.jpg
图像以.img-responsive响应，以便随窗口调整大小。然而，在小屏幕上，带有徽标的中心部分非常小，所以我想摆脱装饰性的侧面部分。剩余的中心部分仍然需要响应，以便徽标保持完全可见 http://i.imgur.com/RrEJgNt.jpg

Answer 1

在媒体查询中，您可以绝对定位图像并使用left: 50%; transform: translateX(-50%)水平居中，同时保留原始高度。

＆＃13;

.img-responsive { max-width: 100%; }

@media (max-width: 1000px) {
  .cropped {
    position: relative;
    height: 250px;
  }
  .cropped .img-responsive {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 150%;
  }
}

＆＃13;

<div class="cropped"><img src="http://placehold.it/1920x250" class="img-responsive"></div>

＆＃13;

Answer 2

如果它可以绝对定位，你可以使用css剪辑：

  img {
    position: absolute;
    clip: rect(0px,1530px,250px,390px);
  }

或者（可能是更明智的解决方案）您可以将其放在父容器中并隐藏溢出：

<div id="bannerContainer">
  <img src="blahblah.jpg" class="yourimage" alt="hi" />
</div>

#bannerContainer {
  width: 1140px;
  height: 250px;
  text-align: center;
  overflow: hidden;
}

在小屏幕上切掉图像的两侧

2 个答案: