Question

我的网站HTML目前有一个图片。它响应迅速通过使用bootstrap - 当我检查它时，它的宽度正确减少不同的设备。但是在这个特殊情况下，我想要它裁剪放大图片时左右。

我尝试了很多技巧，但没有一个适合我。可以这是因为我正在使用bootstrap响应功能？或者我在做什么出了点问题。

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

   <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。

任何人都可以提供帮助吗？

Answer 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-->

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

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

1 个答案: