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

发布时间：2020-12-14 19:33:41 所属栏目：资源来源：网络整理

导读：基于 existing answer,我已经设法使作物成为中心.尽管如此,我对中心裁剪图像做出了很大的反应. 题当我减小Web浏览器窗口的大小时,中心裁剪的图像不会很好地缩小.相反,它保持固定的高度和宽度,并从视图端口溢出. Fiddle可能会更清楚地表明问题. 如何让中心裁

基于 existing answer,我已经设法使作物成为中心.尽管如此,我对中心裁剪图像做出了很大的反应.

题

当我减小Web浏览器窗口的大小时,中心裁剪的图像不会很好地缩小.相反,它保持固定的高度和宽度,并从视图端口溢出. 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,可能比散文更好地证明问题.

解决方法

阅读代码中的注释以进行解释.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!