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

Question

基于existing answer，我设法居中裁剪图像。不过，我无法使中心裁剪的图像响应。

问题

当我缩小网络浏览器窗口的大小时，中心裁剪的图像不能很好地缩小。相反，它保持固定height 和width 并且溢出 出视口。使用Fiddle 可能更清楚地说明了这个问题。

如何使中心裁剪的图像很好地缩小？理想情况下，中心裁剪的图像将很好地缩小，同时仍然被裁剪并保持相似的纵横比。

.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%;
}

<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>

同样，这里有一个Fiddle，它可能比散文更能说明问题。

Answer 1

只需以 % 而不是 px 给出宽度。

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

Answer 2

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

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 3

以下解决方案使用 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 4

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

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 5

Fiddle 的裁剪是否正确？

通过以下 CSS，我们可以在调整窗口大小时保持容器的纵横比。

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

Answer 6

将这个 (fiddle) 添加到 .center-cropped-img 是否能达到您想要的效果？或者您不想更改正在裁剪的区域？

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

Answer 7

使用填充技巧。 您需要一个容器，您将其设置为以百分比表示的宽度、0 的高度和底部的填充以创建您正在寻找的纵横比。 如果您可以将图像设置为背景，那就更容易了。

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

如果您需要将图片放在图片标签中，请告诉我，也可以，但速度不快