5

cssを使用して元の画像の幅と高さの50％を設定する方法はありますか？たとえば、私はこのコードを持っています：

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

HTMLで幅と高さを指定しませんが、元の高さと幅の50％にします。CSSを使用してそれを行うことはできますか？

これは機能しません：

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

これを克服する方法はありますか？ありがとう

4

4 に答える 4

13

ここで説明されているように画像を拡大縮小できます： CSS画像はそれ自体のパーセンテージを変更しますか？

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-21T13:44:31.650 に答える
2

コメントで言ったように。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-21T13:40:40.750 に答える
0

インラインで解決できます：

<img src="..." onload="this.width*=0.5"/>
于 2020-10-24T10:19:39.587 に答える
-1

CSS ... myIMG {zoom：50％;}

インライン-CSS 

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

于 2015-09-02T08:14:00.450 に答える