[英]howto crop *AND* scale a background image in css
I have a "main-image" containing lots of small images which I "clip" into divs of fixed size by setting the background-position to some negative offsets. 我有一个“主图像”,其中包含许多小图像,通过将背景位置设置为某些负偏移量,可以将这些小图像“剪切”为固定大小的div。 This works great!
这很棒!
Now I have a div with a size that changes during the lifetime of the web-page. 现在,我有了一个div,其大小在网页的生存期内会发生变化。 The old code had its own backgound-image with the background-size set to "contain".
旧代码有自己的背景图像,背景尺寸设置为“包含”。 Something like this:
像这样:
.dump {
display: inline-block;
background-image: url("/some/image.png");
background-repeat: no-repeat;
background-size: contain;
}
And that worked great too. 而且效果也很好。
Now I'm trying to clip that background image from my "main-image". 现在,我试图从“主图像”中剪切该背景图像。
Eg My "main-image" has a size 1800px128px The sub-image I like as background starts @1200px,10px with a size of 200px x 80px. 例如,我的“主图像”的大小为1800px128px。我喜欢作为背景的子图像以@ 1200px,10px开始,尺寸为200px x 80px。 Is there a way to clip this rectangle and than scale to the dimensions of the containing div (which are unknown at the time of programming)
有没有一种方法可以裁剪此矩形,然后缩放到包含div的尺寸(在编程时未知)
Thanks for the hint. 感谢您的提示。 However, I tried but can't get anything to work: My problem is, that the div image should follow the height the containing div, so I can't tell size, or scale or zoom or whatever at the time of coding.
但是,我尝试了但没有任何效果:我的问题是,div图像应遵循所包含div的高度,因此在编码时我无法分辨大小,缩放或缩放等。 I give an example:
我举一个例子:
<div style="width:100%; height:30%; text-align: center">
<div class="dump"></div>
</div>
Now, as I said: The image I want to appear as the background of div.dump is the 200x80px area from the main-image @origin(1200,10) AND I want that resulting image scaled to fit the hight of the container. 现在,当我说:我要出现div.dump的背景图像从主图像@origin(1200,10)的200x80px区域,我想那得到的图像缩放到适合容器的HIGHT。 So, I have a known translation, followed by an unknown zoom.
因此,我有一个已知的翻译,然后是一个未知的缩放。 Maybe it's just over my head.
也许就在我头上。
I believe the best way to do this is using css transforms, I found this page for further reference on how to transform a background image and made this fiddle based on it. 我认为,要做到这一点是使用CSS转换的最佳方式,我发现这个网页,了解如何变换背景图像进一步参考和使这个小提琴基于它。
The idea is that you will use the classes "icon" and "icon:before" to configure your sprite to fit in an element and use other classes like "smaller" and "bigger" to set the actual size of the element. 这个想法是,您将使用“ icon”和“ icon:before”类将子画面配置为适合某个元素,并使用“ smaller”和“ bigger”等其他类来设置元素的实际大小。
.icon
{
font-size: 2em;
text-align: center;
line-height: 3em;
border: 2px solid #666;
border-radius: 7px;
position: relative;
overflow: hidden;
}
.icon:before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
z-index: -1;
background: url(http://blogs.sitepointstatic.com/examples/tech/background-transform/background.png) 0 0 repeat;
transform: translate(-50%, -50%) scale(1.5, 1.5);
background-repeat: no-repeat;
background-size: contain;
}
.smaller{
float:left;
width: 120px;
height: 120px;
}
.bigger{
float:left;
width: 200px;
height: 200px;
}
Because css transforms support percentage, the background will be clipped and scaled correctly, according to the size defined in "smaller" and "bigger" 由于css转换支持百分比,因此将根据“较小”和“较大”中定义的大小正确裁剪和缩放背景
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.