简体   繁体   English

如何裁剪* AND *在CSS中缩放背景图像

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM