[html] 자체 CSS 이미지 크기 조정 비율?

두 가지 방법이 있습니다.

방법 1. jsFiddle 데모

이 메서드는 DOM의 실제 크기가 아닌 시각적 인 이미지 만 크기를 조정하고 크기 조정 후의 시각적 상태는 원래 크기의 중앙에 위치합니다.

html :

<img class="fake" src="example.png" />

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');
}​

브라우저 지원 참고 : 브라우저 통계는css.

방법 2. jsFiddle 데모

html :

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>​

css :

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}​

참고 : img.normal 와img.fake같은 이미지입니다.
브라우저 지원 참고 : 모든 브라우저에서 지원하므로이 방법은 모든 브라우저에서 작동합니다.css 가 method에서 사용되는 속성을 합니다.

이 방법은 다음과 같이 작동합니다.

1. #wrap그리고 #wrap img.fake흐름이
2. #wrap갖는다 overflow: hidden(그 크기가 화상 내 동일되도록 img.fake)
3. img.fake유일한 요소는 내부 #wrap없이 absolute그것이 두 번째 단계를 중단하지 않도록 위치
4. #img_wrap보유 absolute위치 내부 #wrap(전체 소자 사이즈 연장 #wrap)
5. 네 번째 단계의 결과 #img_wrap는 이미지와 동일한 크기입니다.
6. 설정 width: 50%에 img.normal그 크기는 50%로 #img_wrap, 따라서 50%원래의 화상의 크기.

답변

<span>
    <img src="example.png"/>
</span>

span {
    display: inline-block;
}
img {
    width: 50%;
}

<figure>
    <img src="example.png"/>
</figure>

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

<img src="..." style="zoom: 0.5" />

-moz-transform: scale(0.5);

<img srcset="example.png 2x">

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

.wrapper { position:relative; overflow:hidden; }

.box { float:left; } //Note: 'float:right' would work too

.box > img { width:50%; }

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});