如何僅使用CSS將HTML圖像大小加倍爲HTML？

我一直在使用嘗試在HTML：如何僅使用CSS將HTML圖像大小加倍爲HTML？

<img src="../Resources/title.png" />

在CSS：

img { 
    width: 200%; 
    height: 200%; 
}

但這種擴展基於父標記的圖像是在圖像如果圖像是150像素150像素我。想要將其縮放到300x300像素。我希望這適用於所有圖像，無論它們的大小或父標籤。而我只想使用CSS。想法？

來源

2012-04-18 Justin Heather Barrios

使用JavaScript嗎？ – j08691 2012-04-18 20:46:03

您不能使用CSS <版本3僅限於。

當設定寬度/高度的元件上它是相對於它的容器。

更新，因爲它已經很長一段時間，因爲這個答案被張貼。

作爲一個評論者所指出的，這可以通過簡單地使用zoom CSS屬性來實現。但是，由於IE6/7天和never formalized into the W3C standard僅首次實施了IE，因此它首次實現了it's not recommended。相反，現在常用的是使用scale函數的CSS轉換。

更多關於scale() CSS功能： https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

例子： https://jsfiddle.net/2n5zLhz3/

來源

2012-04-18 20:45:38 xandercoded

已經有一段時間了;與CSS> =版本3：'{zoom：2}'。 – 2016-12-15 01:35:12

感謝隊友，我不確定「縮放」，只是很快在Chrome瀏覽器中試過它，所以這很棒，你爲正確的方法做了更多的努力！ – 2016-12-15 02:42:20

您可以用scale() 2D做到這一點改變，但作爲的華而不實的新CSS3功能support is incomplete at this time and you need vendor prefixes之一：

img { 
    -moz-transform: scale(2); 
    -ms-transform: scale(2); 
    -o-transform: scale(2); 
    -webkit-transform: scale(2); 
    transform: scale(2); 
}

但是我不相信這是考慮到內容流，作爲變換的做對單個元素不起作用，因此不會影響佈局。另請參閱transform-origin property。

如果你需要很好的瀏覽器支持，或者你需要的內容正確迴流焊，你將不得不湊合着用另一種如使用JavaScript或重組你的HTML，使得width和height屬性將擴展它正確並以自然的方式影響元素流動。

來源

2012-04-18 20:49:45 BoltClock

您可以在DIV圍住圖像，然後相對於母公司的大小設置。

<style type="text/css"> 
.double{ 
    display: inline-block; 
} 

.double img{ 
    width: 200%; 
} 
</style> 
<div class="double"><img src="../Resources/title.png"></div>

來源

2014-07-30 13:57:26 IllidanS4

您可以通過從窗口大小中獲取所需的百分比來使圖像翻倍。

p > img { 
    width:100%; 
    height:60vh; 
}

「height：100vh;」意味着100％從您的瀏覽窗口。只需要做數學。

來源

2016-09-06 10:23:30

如何僅使用CSS將HTML圖像大小加倍爲HTML？

回答

相關問題