如何使中心裁剪图像响应？ [英] How to make centre cropped image responsive?

问题描述

根据现有答案，我已成功地裁剪出一张图片。我有麻烦使中心裁剪图像响应，但。

Based on an existing answer, I have managed to centre crop an image. I am having trouble making the centre cropped image responsive, though.

问题

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

When I reduce the size of the web browser window, the centre cropped image does not scale down nicely. Instead, it maintains it's fixed height and width and spills out of the view-port. The problem is perhaps demonstrated more clearly with a Fiddle.

如何使中央裁剪的图像缩小？理想情况下，中心裁剪的图像将缩小，同时仍然被裁剪和保持类似的长宽比。

How can I make the centre cropped image scale down nicely? Ideally the centre cropped image will scale down nicely while still being cropped and maintaining a similar aspect ratio.

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

是一个小提琴，可能比散文更好地演示了这个问题。

Again, here is a Fiddle that perhaps demonstrates the problem better than in prose.

推荐答案

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

Read the comments in the code for an explanation.

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)*/
}  

这篇关于如何使中心裁剪图像响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！