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

问题描述

根据 现有答案，我设法将图像居中裁剪.但是，我无法使中心裁剪的图像具有响应性.

问题

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

我怎样才能很好地缩小中心裁剪的图像?理想情况下，中心裁剪的图像将很好地缩小，同时仍然被裁剪并保持相似的纵横比.

.center-container {最大宽度:960px；保证金:自动；}.center-cropped-img {宽度:640px；高度:360px；溢出:隐藏；边距:10px 自动；边框:1px 红色实心；位置:相对；}.center-cropped-img img {位置:绝对；左:-100%；右:-100%；顶部:-100%；底部:-100%；保证金:自动；最小高度:100%；最小宽度:100%；}

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

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

解决方案

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

JSFiddle

HTML

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

CSS

/*一些用于裁剪图像的灵活容器的基本标记*/.容器 {宽度:80%；边框:3px 红双；边距:50px 自动；填充:0;溢出:隐藏；/*不显示溢出的图像*/背景颜色:黄色；}.container img {显示:块；width: 200%;/** (1/你想要显示的总图像宽度的一部分)*100% 在这个例子中你想要显示 50% 的图像宽度**/margin-left:-50%;/* 将图像向左移动，从视图中删除该内容(并显示右侧的内容).-0% 将显示图像的左侧.在此之前的规则中定义的宽度的负值 + 100% 将显示图像的右侧.我想您可以通过更改此值来计算其余部分.*/margin-top: -25%;/*改变顶部和底部的值有点痛苦.经过一些试验和错误(在谷歌浏览器中)，它们似乎基于图像容器的宽度，而不是高度(这有多不寻常！！！).因此，在此值中放置 -100% 将(重新)将图像向上移动 #container div 宽度的 px 值.如果您使用的是 css sprite，则应避免将此值设置为 0% 以外的值.或者，对图像的原始尺寸进行一些数学计算:-(您想要的图像的垂直像素)/(图像宽度)* 100% 应该适用于像素精度).好消息是图像随#container div 缩放.因此，图像随着容器显示图像的完全相同部分(而不是显示更多/更少内容)而增长和缩小.*/margin-bottom:-25%;/*(重新)移动图像底部的一些部分.更多见margin-top(工作相同)*/}

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

Question

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