Question

css代码段：

.imageContainer {
    height: 750px;
    width: 100%;
    overflow: hidden !important;
}

.imageContent{
    background: url('http://orig15.deviantart.net/0e45/f/2010/052/1/1/calvin_and_hobbes_2010_by_nami86.png') no-repeat center center;
    background-size: 100%;
  width: auto;
  height: 100%;
  padding-top: 3%;
    padding-bottom: 3%;
    min-width: 1200px;
    overflow: hidden !important;
}

当图像停止缩放时，有没有办法让它成为中心？也就是说，就目前而言，它是从右边开始的。我们可以均匀地从两侧裁剪吗？如果是这样，那怎么办？

Answer 1

请参阅更新的jsfiddle＆gt; here

您需要按高度进行缩放才能获得正在寻找的裁剪效果，请参阅代码：

.imageContent{
    background: url('http://orig15.deviantart.net/0e45/f/2010/052/1/1/calvin_and_hobbes_2010_by_nami86.png') no-repeat center center;
    background-size: auto 100%;
  height: 500px;
  padding-top: 3%;
  padding-bottom: 3%;
}

背景尺寸属性处理缩放，这就是为什么我将其更改为宽度始终为auto且高度为100％的原因，然后我添加了一个硬度高，以像素为单位可以更改。这会产生预期的效果。

Answer 2

简单回答是设置

background-size: 50%;

你的小提琴看起来不错。

Answer 3

将background-size: 100%;替换为background-size: cover;

https://jsfiddle.net/2esv5wja/4/

Answer 4

试试这个：

 background-size: 100% 100%;

CSS背景图像缩放到中心？

4 个答案: