jquery/css 如何调整和裁剪大图像以适合我的显示 div？

Question

所以基本上我有几个 div 支架，我设置为 192px 宽度和 192px，我将所有 img 类 .img_thumb 设置为适合 div 支架宽度和高度的 100%，重新缩放图像以适合 192px。

理想情况下，我想要做的是例如超过 3000 宽度/高度的图像，我想在运行中重新调整适合 192 像素的图像，然后裁剪图像的中间并将其放置在div 持有人。有人有什么建议吗？这就是我目前所拥有的

我的html

<div class="content sixteen full columns float-l">
    <div class="img_thumb_holder float-l">
        <img class="img_thumb" alt="portfolio">
    </div>
</div>

我的 CSS

.container .img_thumb_holder{
width:192px;
height:192px;
background: black;
position: relative; 
}

.container .img_thumb{ 
width: 100%; 
height:100%;
}

请注意，我想重新缩放和裁剪图像的一部分，而不仅仅是重新缩放以适应 div 支架中的整个图像。谢谢

Answer 1

你可以：

1. Find out 你的图片是否太大，如果是，则应用too-large 类。
2. 使用 CSS 调整 img.too-large 的大小以获得首选大小（设置绝对大小 width 和 height）。 .img_thumb.too-large { 宽度：1234px； /* 放入你自己的 / 高度：321px； / 这里首选尺寸 */ }

3. 模拟“裁剪”：

   .img_thumb_holder {
       /* your previous code */
       position: relative;
       overflow: hidden;
   }
   .img_thumb.too-large {
       position: absolute;
       left: -123px;    /* use your own numbers here */
       top: -456px;    /* to position image as you see fit */
   }
   

---

或者您可以将图像显示为background-image 并以完全不同的方式完成整个操作，正如另一个答案所建议的那样。

Answer 2

你可以使用 background-image 和 background-position amd background-size

.img_thumb_holder {
    width:192px;
    height:192px;
    background-size: 300px;
    background-position: center center;
}

和

<div class="img_thumb_holder float-l"   style="background-image: url(....)">&nbsp;</div>