如何在网站中裁剪响应式图像答案

【问题标题】：How to crop responsive image in website如何在网站中裁剪响应式图像
【发布时间】：2016-05-13 15:36:42
【问题描述】：

我有一张图片当前位于网站 HTML 中。它反应灵敏通过使用引导程序-当我签入时它的宽度会适当减小不同的设备。但是在这种特殊情况下，我希望它裁剪到放大图片时左右。

我尝试了很多技巧，但没有一个对我有用。可以是因为我使用的是引导响应功能吗？还是我在做出了点问题。

我很想得到一些帮助。目前这也是我正在使用的代码：

   <section>
   <div class="container">
      <div class="row">
            <div class="col-lg-12 woodbar">
          <img src="img/WoodenBar2.png" class="img-responsive" alt="Responsive image">
         </div>
           </div>
     </div>
    </section>

现在 CSS 很干净，因为 bootstrap 内置了 img-responsive。

有人可以帮忙吗？

【问题讨论】：

怎么放大？哦...裁剪从根本上与响应性相反。你必须选择其中一个。
可能两个图形的位置，让它们部分重叠，这样当下层图形展开时，更多的被覆盖了。
也许我一直不清楚。我希望我必须缩小尺寸直到一定尺寸（又名响应式）的 img。从一个特殊的尺寸向下（比如说 980px）我希望它开始从左右裁剪图像。基本上它是一个木条的图像，中间有旗帜。当通过手机查看时，所有用户最终应该看到的是标志。
检查图片填充以获取响应式图像..scottjehl.github.io/picturefill
我正在使用引导程序，我想坚持下去。也许还有其他解决方案？

标签： html css responsive

【解决方案1】：

尝试在图像上使用翻译，以裁剪它。

* {
  margin : 0px;
  padding: 0px;
}
#imgContainer {
  overflow    : hidden;
  width       : 100vh;/*this will need to be changed manually*/
  height      : 100vh;/*this will need to be changed manually*/
  margin-left : calc(50vw - 50vh);/*this will need to be changed manually*/
}
img#toCrop {
  margin-top  : -20vh;/*this will need to be changed manually*/
  margin-left : -30vh;/*this will need to be changed manually*/
  width       : 140vh;/*this will need to be changed manually*/
  height      : 140vh;/*this will need to be changed manually*/
}
@media only screen and (max-aspect-ratio: 1/1) {/*this will need to be changed manually*/
  #imgContainer {
    width       : 100vw;
    height      : 100vw;
    margin-top  : calc(50vh - 50vw);
    margin-left : 0px;
  }
  img#toCrop {
    margin-top  : -20vw;
    margin-left : -30vw;
    width       : 140vw;
    height      : 140vw;
  }
}

<div id = 'imgContainer'>
  <img id = 'toCrop' src = 'https://dummyimage.com/600x600/000/fff'>
</div>
<!--Will work best as an iframe-->

不过大部分都需要手动更改。

【讨论】：

请给用户提供一个例子，让这个答案有意义