更改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中包含的所有图像的大小

回答

相关问题