更改div中包含的所有圖像的大小

-1

讓<div id='blah'>包含許多圖像。是否有一種簡單的方法將所有<div>的兒童圖像的尺寸設置爲其原始尺寸的一半（或30％或其他）？ （如果可能的話，而無需環路與JS所有兒童圖像）更改div中包含的所有圖像的大小

<div id='blah'> 
<img src="http://www.locanto.info/petites_annonces/images/dog.png"></img> 
<img src="http://www.alsacroc.fr/contents/img/chiot.jpg"></img> 
<img src="http://static.wamiz.fr/images/animaux/chiens/large/chien-du-groenland.jpg"></img> 
</div>

Live demo

來源

2014-10-06 Basj

如果你想根據自己的原始大小調整它們的大小，那麼你將不得不使用JavaScript，遍歷他們每個人，並相應設置。你爲什麼不想這樣做？ – ndugger 2014-10-06 19:39:21

寬度或高度的一半？ – 2014-10-06 19:39:52

@NickDugger：因爲我會有動態的內容，有時候會有新的到達，還有一些消失等，所以如果我可以避免測試一個新的是否已經到達以調整它的大小，並有一個「全局」調整大小這將適用於所有圖像 - div的孩子，這將會很棒！ – Basj 2014-10-06 19:42:23

是的，你可以使用CSS：

div#blah img { 
    width:30%; 
    height:auto; 
}

，或者您可以使用變焦（ 0到1）來調整圖像的大小，而不涉及父div。

ZOOM跨瀏覽器：

-moz-transform: scale(0.5); /* Firefox */ 
-moz-transform-origin: 0 0; 

-o-transform: scale(0.5); /* Opera */ 
-o-transform-origin: 0 0; 

-webkit-transform: scale(0.5); /* Safari And Chrome */ 
-webkit-transform-origin: 0 0; 

transform: scale(0.5); /* Standard Property */ 
transform-origin: 0 0; /* Standard Property */

來源

2014-10-06 19:39:46 Monte

不，如果您將原始JSfiddle與您的比較，您會看到最大圖像的大小發生了很大變化，而小圖像的大小僅發生了一點變化......我想要按比例調整大小：所有圖像都應該有它們的原始尺寸的30％。 – Basj 2014-10-06 19:45:04

所以，你必須使用縮放：（0到1）。該值將根據其大小按比例調整圖像大小。 – Monte 2014-10-06 19:47:08

你是不是指'zoom'屬性？它在Firefox – Basj 2014-10-06 19:47:52

你需要使用transform和scale，其工作相對元素的原始尺寸：

#blah img { 
    transform: scale(0.3); 
}

記住transform's browser prefixes。

JSFiddle

來源

2014-10-06 19:46:30 George

更改div中包含的所有圖像的大小

回答

相關問題