如何使图像宽度始终为 100%，但从两端动态裁剪高度答案

【问题标题】：How to have the image width wise always 100% but height cropped from both ends dynamically如何使图像宽度始终为 100%，但从两端动态裁剪高度
【发布时间】：2016-04-28 18:31:52
【问题描述】：

我有投资组合项目的缩略图，但大小不同。我如何才能使图像宽度始终为 100%，但从两端动态裁剪高度？

这里是html结构

<div class="portfolioimagebg" style="background:url(http://xxxxxxxxxxx.jpg);background-size: cover;background-position: center center;width:100%;background-repeat: no-repeat;"></div>

这可能吗？

【问题讨论】：

我不确定是否理解，这里您使用的是 background-size:cover，因此您的图像应该始终符合 div 大小。能举个例子吗？

标签： jquery css crop

【解决方案1】：

如果我没听错的话，这段代码会做大致相同的事情

#section1 {

    background: url(../images/Components.jpg) no-repeat center center;

    background-color: rgb(40, 75, 99);

    box-shadow: inset 0 0 0 1000px rgba(50, 75, 99, .8);

    background-size: cover;

    color: #fff;

    min-height: 800px;

}

只需根据需要删除/编辑 min-height，此代码用于覆盖所有设备上的整个 div 缩放，如果您需要宽度，请尝试使用 min-width:100%；

【讨论】：

使用背景尺寸的图像不能完全平静
哦，我知道你想让它伸展我去看看
我不想拉伸它们，所有问题都在于我不想拉伸它们。有办法吗？
您确定图片纵横比正确吗？如果您的宽高比与网站不同，图像将不会完全显示，只是部分显示，因此会填满屏幕
这里是网站链接ipointnew.ipoint.com.mt/creations - 所以你可以查看缩略图

【解决方案2】：

如果我正确理解您的问题，您可以使用background-size: 100% 和background-position: center。然后您的背景将始终为 100% 宽度并以 div 为中心。这是一个小提琴Fiddle

【讨论】：

按照你所说的，我的顶部和底部都是空的，我需要图像全宽，但会自动调整高度
然后你需要使用 background-size:cover 而不是 100% 但这不会让你的图像 100% 覆盖 div 所以它可能是 div 的 120% 宽度。如果您在 background-size:100% 的情况下让顶部和底部为空，那么您将需要使用 background-size:cover。将图像更改为始终为 100% 的宽度，然后动态填充 div 的其余部分会导致图像倾斜并使图像看起来很糟糕。所以我认为你最好的选择是使用 background-size: cover 和 backgroun-position: center。
使用该选项我将拥有图像而不是全角的平静，有没有办法调整全角和高度@Drinkin People？

【解决方案3】：

动态是什么意思？

如果您需要离散间隔（例如桌面/平板电脑/移动设备），您可以使用 CSS 媒体查询。

如果您需要连续间隔（如窗口大小），您必须使用 javascript 或其他脚本语言来完成。

无论如何there is a fiddle 使用媒体查询。它只是设置了一个在某个断点处改变的固定高度（在这种情况下，对于具有

.portfolioimagebg{
 height: 300px
}

@media screen and (max-width:760px){       
   .portfolioimagebg{
     height:100px;
 }
}

有关媒体查询的更多信息see this。

【讨论】：

动态地说，我的意思是自动不依赖于上传的图像宽度或高度