Question

让<div id='blah'>包含许多图片。有没有一种简单的方法可以将所有<div>的儿童图像的大小设置为其原始大小的一半（或30％或其他任何东西）？ （如果可能的话，无需使用JS循环所有子图像）

<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

Answer 1

您需要使用相对于元素原始大小的transform和scale：

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

记住transform's browser prefixes。

JSFiddle

Answer 2

是的，您可以使用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 */

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

2 个答案: