Question

如何缩放添加的图像：在CSS之前或之后？：

例如，我有一个包含书籍封面的页面：

<span class="book">
    <img src="http://ecx.images-amazon.com/images/I/41t7xMPK%2B6L.jpg" />
</span>

我想使用CSS让它看起来更像是一本书，而不仅仅是一本封面。我可以使用：在添加第二张图像之前执行此操作，但由于所有图书的大小各不相同，我需要能够缩放此图像以适应书籍封面。

我试过了

.book:before{
    content:url("/images/book.png");
    position:absolute;
    height:100%;
    width:100%;

}

但这在缩放图像时不起作用。

Answer 1

你可以缩放它：

transform: scale(0.7);

但它不适用于px或％。

Answer 2

生成的图像始终以1：1显示。你无法扩展它。当您修复生成的元素的大小时，这很有效。您可以使用以下CSS属性进行检查：

#logo-image:before
{
    display: block;
    content: url(img/logo.png);
    width: 300px;
    height: 100px;
    border: solid 1px red;
    overflow: scroll;   /* alternative: hidden */
}

您可以看到指定尺寸的红色边框，并剪裁图像内容。但如果你省略溢出：滚动，你会看到超出其元素的图像。

（在Firefox 11上测试）

Answer 3

尝试将两者的min-height和max-height设置为相同的值，然后应将图像缩放到正确的大小，同时保持正确的宽高比。（并根据您想要缩放的宽度来做到这一点）

缩放CSS中生成的内容

3 个答案: