基于一个现有答案,我已经设法居中裁剪图像。不过,我在使中心裁剪图像具有响应能力时遇到了困难。
Question
当我减小网络浏览器窗口的大小时,中心裁剪图像不能很好地缩小。相反,它保持固定状态height
and width
and spills出视口。这个问题也许可以通过以下方式更清楚地证明: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)*/
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)