使用css設置原始圖片寬度和高度的50％使用css

是否有任何方式使用css設置原始圖片寬度和高度的50％？例如，我有這樣的代碼：使用css設置原始圖片寬度和高度的50％使用css

<img src="http://content.captive-portal.com/files/ign/movie-news/content/2b.jpg">

我不指定任何HTML寬度和高度，但我希望它是原來的高度和寬度的50％。我可以使用CSS來做到這一點嗎？

這不起作用：

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

有什麼辦法來克服這個？謝謝

來源

2013-02-21 Piotr Ciszewski

您應用的CSS樣式應該可以工作。你能發佈更多細節嗎？ – otinanai 2013-02-21 13:37:38

設置50％的寬度將使圖像的寬度達到其容器的50％。你需要知道原始尺寸。 – BenM 2013-02-21 13:37:52

這隻能用JavaScript完成客戶端。 – Mooseman 2013-02-21 13:37:54

您可以縮放圖像，如下所述： CSS image resize percentage of itself?

img {-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ 
-moz-transform: scale(0.5); /* FF3.5+ */ 
    -ms-transform: scale(0.5); /* IE9 */ 
    -o-transform: scale(0.5); /* Opera 10.5+ */ 
     transform: scale(0.5); 
     /* IE6–IE9 */ 
     filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');}

來源

2013-02-21 13:44:31 Jacob

令人驚歎的答案。謝謝。補充我的知識。 – 2013-02-21 15:08:10

正如我在我的評論中所說。在CSS中設置width: 50%只會將圖像的寬度設置爲其包含元素的50％。

您將需要使用JavaScript實現此目的。 jQuery的使得它非常簡單，例如：

$('img').each(function() { 
    var the_width = $(this).width(), 
     new_width = Math.round(the_width/2); 
    $(this).width(new_width); 
});

來源

2013-02-21 13:40:40 BenM

只是爲什麼你必須強制JQuery！ – Jacob 2013-02-21 13:41:56

爲什麼不呢？它正在成爲行業標準，當你比較這個（微不足道）過程所需的代碼時，利用jQuery的強大功能是很有意義的。當然，包括一個任務的整個庫沒有意義，但我高度懷疑OP已經在使用它（我的意思是，誰不是）...... – BenM 2013-02-21 13:44:03

@BenM感謝您的幫助。將嘗試這一個以及:) – 2013-02-21 14:25:18

CSS ... myIMG {變焦：50％;}

inline-CSS

 
    <IMG STYLE="zoom:50%;" SRC="...">

來源

2015-09-02 08:14:00

你想達到什麼目的？ – romuleald 2015-09-02 08:37:01

使用css設置原始圖片寬度和高度的50％使用css

回答

相關問題