Question

根据existing answer，我设法裁剪图像。但是，我无法使中心裁剪的图像响应。

问题

当我减小Web浏览器窗口的大小时，中心裁剪的图像不能很好地缩小。相反，它会将其固定的height和width以及溢出保留在视口之外。使用Fiddle可能更清楚地证明了这个问题。

如何让中心裁剪的图像缩小？理想情况下，中心裁剪后的图像会在裁剪时保持良好的缩小，并保持相似的纵横比。

＆＃13;

.centered-container {
  max-width: 960px;
  margin: auto;
}
.center-cropped-img {
  width: 640px;
  height: 360px;
  overflow: hidden;
  margin: 10px auto;
  border: 1px red solid;
  position: relative;
}
.center-cropped-img img {
  position: absolute;
  left: -100%;
  right: -100%;
  top: -100%;
  bottom: -100%;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
}

＆＃13;

<div class="centered-container">
  <div class="center-cropped-img">
    <img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
  </div>
  <div class="center-cropped-img">
    <img src="http://i.imgur.com/BQUgmlB.png" alt="" />
  </div>
</div>

＆＃13;

同样，这里的Fiddle可能比散文更能证明这个问题。

Answer 1

阅读代码中的注释以获得解释。

JSFiddle

<强> HTML

<div class="container">
  <img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
</div>
<div class="container">
  <img src="http://i.imgur.com/BQUgmlB.png" alt="" /> 
</div>

<强> CSS

/*some basic markup for a flexible container to crop the image*/
.container {
    width: 80%;
    border: 3px red double;
    margin: 50px auto;
    padding:0;
    overflow: hidden;/*do not show image that is overflowing*/
    background-color: yellow;
}
.container img {
    display: block;
    width: 200%;/** (1 / part of the total image width you want shown)*100% In this example you want to show 50% of the image-width**/
    margin-left:-50%;/*move the image to the left, removing that content from view (and making content on the right appear). -0% will show the left side of the image. The negative value of the defined width in the rule before this one + 100% will show you the right side of the image. I guess you can figure the rest out by changing this value.*/
    margin-top: -25%;/*changing the top and bottom values is a bit of a pain. After some trial and error (in google chrome) it appears they are based on the width of the image container, not the height (how unusual is that!!!). So putting -100% in this value would (re)move the image up by the px value of the width of the #container div. If you are using css sprites you should avoid setting this value other than 0%.
Alternatively do some math on the original dimensions of the image:    -(vertical pixels you want off the image)/(image width)* 100%    should work for pixel precision).
The good news is that the image scales with the #container div. So the image grows and shrinks with the container showing the exact same part of the image (and not showing more/less content).*/
    margin-bottom:-25%;/*(re)move some of the bottom part of the image. See margin-top for more (works identical)*/
}

Answer 2

使用填充黑客。你需要一个容器，你设置为宽度百分比，高度为0，底部填充以创建你正在寻找的宽高比。如果您可以将图像设置为背景，则更容易。

我为此写了一篇sass mixin，还在我的博客上写了一个小教程，附带了一些更广泛的解释：http://bekreatief.blogspot.ch/2014/09/padding-hack-sass-faux-color-overlay.html

如果您需要将图片放在图片标签中，请告诉我，这也是可能的，但不是那么快

Answer 3

将此（fiddle）添加到.center-cropped-img是否达到了您想要的效果？或者你不想改变被裁剪的区域？

    max-width: 640px;
    width: 100%;

Answer 4

这Fiddle做正确的裁剪吗？

使用以下CSS，我们可以在调整窗口大小时保持容器的宽高比。

width: 640px;
max-width: 100%;
height: 0;
padding-bottom: 50%; // 320px or lower (half of the width)

Answer 5

以下解决方案使用CSS background-size属性。图像放在背景中。使用<img>标记，以便搜索引擎可以查看图片。

/* responsive 40% wide, 4:3 aspect ratio container */
.centered-image {
  width: 40%;
  padding-top: 30%;
  background-position: center center;
  /* optional */
  margin: 1em auto;
  box-shadow: 0 0 .5em .25em black;
}
.centered-image.cropped {
  background-size: cover;
}
.centered-image.scaled {
  background-size: contain;
  background-repeat: no-repeat;
}
/* use your favorite text hiding technique */
.centered-image img {
  display: none;
}
/* miscellaneous */
body {
  margin: 0;
  padding: 0;
}
h1 {
  width: 40%;
  margin: 1em auto;
  font: bold medium monospace;
}

<h1>Cropped to Fit</h1>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/400/400/sports/1/);">
  <img src="http://lorempixel.com/400/400/sports/1/" width="400" height="400" alt="">
</div>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/400/200/sports/2/);">
  <img src="http://lorempixel.com/400/200/sports/2/" width="400" height="200" alt="">
</div>
<div class="centered-image cropped" style="background-image: url(http://lorempixel.com/200/400/sports/3/);">
  <img src="http://lorempixel.com/200/400/sports/3/" width="200" height="400" alt="">
</div>
<h1>Scaled to Fit</h1>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/400/400/sports/1/);">
  <img src="http://lorempixel.com/400/400/sports/1/" width="400" height="400" alt="">
</div>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/400/200/sports/2/);">
  <img src="http://lorempixel.com/400/200/sports/2/" width="400" height="200" alt="">
</div>
<div class="centered-image scaled" style="background-image: url(http://lorempixel.com/200/400/sports/3/);">
  <img src="http://lorempixel.com/200/400/sports/3/" width="200" height="400" alt="">
</div>

Answer 6

我尝试过使用脚本。我只是创建了一个函数，并调用了加载和重新调整大小。

<强>的jQuery

$(document).ready(function () {
    heightMan();

    $(window).resize(function () {
        heightMan();
    });
});

function heightMan() {
    var winHeight = $(window).height();
    var winHeight_50 = (winHeight / 2) - 20;

    var container_node = $('.center-cropped-img');
    var container_height = container_node.height();
    container_height = winHeight_50;

    container_node.css('height', container_height);
}

CSS更改

.center-cropped-img {
    width: 64%;
    overflow: hidden;
    margin: 10px auto;
    border: 1px red solid;
    position: relative;
}

See in action

Answer 7

只需以％表示宽度而不是px。

.center-cropped-img {
    width: 640px;// add in %
    height: auto;
    overflow: hidden;
    margin: 10px auto;
    border: 1px red solid;
    position: relative;
}

如何使中心裁剪图像响应？

7 个答案: