在小屏幕上切掉图像的侧面 [英] Cut away sides of image on small screens

问题描述

我正在使用 Bootstrap，我的页面顶部有一个横幅 (1920*250px).横幅是响应式的(使用 .img-responsive).
在小屏幕(sm 和 xs)上，虽然我想切掉侧面，以便横幅的新基本宽度为 1140 像素(我想将基本高度保持在 250 像素 我希望图像表现得像它是 1140*250px 并且仍然具有响应性)，但我不知道该怎么做.
如有任何帮助，我将不胜感激.

I'm using Bootstrap and I have a banner (1920*250px) across the top of my page. The banner is responsive (using .img-responsive).
On small screens (sm and xs) though I want to cut away the sides so that the banner has a new base width of 1140px (I want to keep the base height at 250px I want the image behave like it is 1140*250px and still be responsive), but I have no idea how to do that.
I'd be grateful for any help.

这是我想要的更好的解释:
我有一个 1920*250px 大的横幅.它在中心包含一个部分(1140*250px)，其中包含一个徽标，我希望该部分始终完全可见，横幅的布局大致如下:http://i.imgur.com/kNBqEGD.jpg
图像通过 .img-responsive 进行响应，因此它会随着窗口调整大小.然而，在小屏幕上，带有标志的中心部分非常小，所以我想去掉装饰性的侧边部分.剩余的中心部分仍然需要响应，以便徽标保持完全可见.
http://i.imgur.com/RrEJgNt.jpg

Here is a better explanation of what I want:
I have a banner that is 1920*250px big. It contains a section (1140*250px) in the center that contains a logo, I want this section always be entirely visible, the layout of the banner is roughly like this: http://i.imgur.com/kNBqEGD.jpg
The image is made responsive with .img-responsive, so that it resizes with the window. However, on small screens the center section with the logo is really small, so I want to get rid of the decorational side pieces. The remaining center section still needs to be responsive so that the logo remains fully visible.
http://i.imgur.com/RrEJgNt.jpg

推荐答案

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

In a media query, you can absolutely position the image and use left: 50%; transform: translateX(-50%) to center it horizontally while retaining the original height.

.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%;
  }
}

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

这篇关于在小屏幕上切掉图像的侧面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！