裁剪和居中宽屏幕影像

我怎么会自动裁剪图像，在画廊预览，以便宽的图像被剪切掉左边和右边？正好显示图像的中心部分在此所附图片：裁剪和居中宽屏幕影像

crop and center wide image

我有这样的结构：

<div class="wrapper" style="overflow: hidden; height: 100px; width: 120px;"> 
    <div class="container"> 
     <img /> 
    </div> 
</div>

我想只能用CSS和JavaScript的没有做到这一点。
阴性切缘（固定的）是不是因为更多钞票我的照片的宽度可以是非常不同的。

来源

2016-01-21 Maxick

我通常用的是以下几点：

.container { 
 
    height: 100px; 
 
    width: 120px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.container img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%,-50%); 
 
    transform: translate(-50%,-50%); 
 
}

<div class="container"> 
 
<img src="http://placehold.it/400x350" /> 
 
</div>

这适用于任何图像的大小。你甚至可以为图像添加一个高度，以限制其高度（如图像中）到容器高度（然后它只会剪切图像的左侧和右侧）。您可以将其用于任何元素，包括video。

来源

2016-01-21 15:01:15 somethinghere

作品！随着一小部分（“身高：100％”的形象 - 拉伸）很酷。谢谢！ – Maxick

@Maxick我确实提到过你应该增加高度来达到类似于你的形象的效果。我通常使用这段代码来拉伸背景视频（如果将'min-width'和'min-height'设置为100％，则很好地覆盖整个区域） – somethinghere

可以使用带有高负左，右值绝对定位。
这种组合宽度margin: 0 auto将集中在容器中的影像让左右两部分溢出：

div{ 
 
    position:relative; 
 
    width:300px; 
 
    height:150px; 
 
    overflow:hidden; 
 
} 
 
img{ 
 
    position:absolute; 
 
    display:block; 
 
    left:-100%; right:-100%; 
 
    height:100%; width:auto; 
 
    margin:0 auto; 
 
} 
 
/*** FOR THE DEMO ***/ 
 
div{margin:0 auto;border:1px solid red;overflow:visible;}img{z-index:-1;}

<div> 
 
    <img src="http://placehold.it/600x150"> 
 
</div>

来源

2016-01-21 15:05:23

-1

我认为最简单的方法是使图像的背景图像和居中像in this example。

基本上设置背景图片在您.wrapper格是这样的：

<div class="wrapper" style="background-image: url(/images/your-image.jpg)"> 
</div>

你做到这一点后，类wrapper不会使因为许多，但你可以像preview或thumbnail改变它的东西。

然后你的造型看起来像这样：

.wrapper { 
    width: 120px; //Or whatever width you need it to be. 
    height: 100px; //Or whatever height you need it to be. 
    background-size: cover; 
    background-position: center; 
}

这确实使用了一点内嵌样式，其中一些人看不惯，但它确实工作，它很简单。

来源

2016-01-21 15:13:09 arjabbar

这是怎么回事？解释将是很好的方式，我可以纠正我的问题。 – arjabbar

裁剪和居中宽屏幕影像

回答

相关问题