在CSS中縮放生成的內容

如何縮放在CSS中添加的圖像之前或之後的圖像？在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%; 

}

但這並不在縮放圖像的工作。

來源

2010-09-07 lucas

嘗試將它們兩者的min-height和max-height設置爲相同的值，然後應該將圖像縮放到正確的大小，同時保持正確的寬高比。（並根據要調整的寬度進行調整）

來源

2011-01-19 07:43:11 0x60

這在FF 31中不適用於我:( – Campbeln 2014-07-30 00:00:12

生成的圖像始終顯示爲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 */ 
}

您可以看到指定大小的紅色邊框，並且圖像內容被裁剪。但是如果你忽略了溢出：滾動，你會看到圖像超出其元素。

（測試火狐11）

來源

2012-04-20 20:51:12 ygoe

你可以擴展它：

transform: scale(0.7);

，但它不會用像素或百分比工作。

來源

2012-05-22 14:01:46

-webkit-transform：scale（0.7）爲我工作。 – Ecropolis 2013-12-18 18:34:28

在CSS中縮放生成的內容

回答

相關問題