Question

有一些问题展示了如何裁剪和居中图像，但我还没有找到符合这些要求的问题：

图像的可见部分必须是方形的。
应缩放图像，以便显示整个高度并填充容器的高度。
容器的大小是可变的，由容器的宽度决定。
图像必须居中。

最终目标是让一个网格中连续3个方形图像缩小，这取决于浏览器的宽度。

这是我到目前为止所拥有的。

＆＃13;

.i-om-section-content {
  max-width: 800px;
  border: 3px solid blue;
  margin: 0 auto;
  padding: 0 32px;
  padding: 0 3.2rem;
  position: relative;
  z-index: 2;
}
.i-om-item {
  overflow: hidden;
  margin: 10px;
  position: relative;
  width: 32.5%;
  height: 0;
  padding-bottom: 32.5%;
  border: 1px solid;
  float: left;
}
img {
  position: absolute;
  left: -100%;
  right: -100%;
  top: 0;
  bottom: 0;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
}

＆＃13;

<div class="i-om-section-content">
  <div class="i-om-item">
    <img src="http://onetaste.us/wp-content/uploads/2015/10/DSC2641.png" />
  </div>
  <div class="i-om-item">
    <img src="http://onetaste.us/wp-content/uploads/2015/10/smita.png" />
  </div>
</div>

＆＃13;

JSFiddle

Answer 1

一般来说，如果您想要更多的高级裁剪/定位/尺寸调整图像，使用它们作为背景图像会更容易。 background-size:auto 100%表示“自动宽度，全高”，其余部分就是您已经拥有的。

<div class="i-om-section-content">
    <div class="i-om-item one">
    </div>
    <div class="i-om-item two">
    </div>
</div>

-

.i-om-section-content {
    max-width: 800px;
    border: 3px solid blue;
    margin: 0 auto;
    padding: 0 32px;
    padding: 0 3.2rem;
    position: relative;
    z-index: 2;
}
.i-om-item {
    overflow: hidden;
    margin: 10px;
    position: relative;
    width: 32.5%;
    height: 0;
    padding-bottom: 32.5%;
    border: 1px solid;
    float: left;
    background-size:auto 100%;
    background-size:center center;
}
.one{
    background-image:url("http://onetaste.us/wp-content/uploads/2015/10/DSC2641.png");
}
.two{
    background-image:url("http://onetaste.us/wp-content/uploads/2015/10/smita.png");
}

https://jsfiddle.net/ammsh4y5/

Answer 2

请参阅此更新fiddle。

它使用jQuery将容器的高度和宽度设置为相同（使其成为方形）。然后它将图像高度设置为div的高度。最后，它通过获取图像和div的宽度之差，将其除以2，并将其向左移动（绝对定位）来使图像居中。

这是jQuery代码（CSS和HTML也被修改）：

function updateImage() {
    $("img").each(function() {
        var parent = $(this).parent();
        parent.height(parent.width()); 
        $(this).height(parent.height());
        $(this).css("left", -($(this).width()-parent.width())/2);
    });
}

// call on window resize and on load
$(window).resize(function() {
    updateImage();
});
updateImage();

这不是最优雅的解决方案，但它完成了工作并且非常直观。（但我喜欢@DylanWatt的background-image解决方案：更有创意）。

Answer 3

.i-om-section-content {
    max-width: 800px;
    border: 3px solid blue;
    margin: 0 auto;
    padding: 0 32px;
    padding: 0 3.2rem;
    position: relative;
    z-index: 2;
}
.i-om-item {
    overflow: hidden;
    margin: 10px;
    position: relative;
    width: 32.5%;
    height: 0;
    padding-bottom: 32.5%;
    border: 1px solid;
 
     display:inline-block;    
    background-position:center center;
}
.one{
    background-image:url("http://onetaste.us/wp-content/uploads/2015/10/DSC2641.png");
}
.two{
    background-image:url("http://onetaste.us/wp-content/uploads/2015/10/smita.png");
}

<div class="i-om-section-content">
    <div class="i-om-item one">
    </div>
    <div class="i-om-item two">
    </div>
</div>

当我不知道容器的尺寸时，如何裁剪和居中全高图像？

3 个答案: