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

자체 비율로 img의 크기를 조정하려고합니다. 예를 들어 50 %로 크기를 조정하여 이미지를 절반으로 축소하고 싶습니다. 그러나 적용 width: 50%;하면 이미지 크기가 컨테이너 요소의 50 %로 조정됩니다 (예 : 상위 요소 <body>).

질문은 자바 스크립트 또는 서버 측을 사용하지 않고 자체 비율로 이미지 크기를 조정할 수 있습니까? (나는 이미지 크기에 대한 직접적인 정보가 없습니다)

나는 이것을 할 수 없다고 확신하지만 지능형 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.normalimg.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%원래의 화상의 크기.

답변

HTML :

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

CSS :

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

컨테이너 요소 접근 방식을 사용하는 가장 간단한 솔루션 중 하나 여야합니다.

컨테이너 요소 접근 방식을 사용하는 경우,이 질문의 변형 이 질문에 . 트릭은 컨테이너 요소가 자식 이미지를 축소하여 크기가 조정되지 않은 이미지의 크기와 같도록하는 것입니다. 따라서 width이미지의 속성을 백분율 값으로 설정하면 이미지의 크기가 원래 크기를 기준으로 조정됩니다.

다른 수축 포장 활성화 속성 및 속성 값 중 일부는 링크 된 질문에서 언급 한대로 float: left/right, position: fixedmin/max-width입니다. 각각 고유 한 부작용이 있지만 display: inline-block더 안전한 선택이 될 것입니다. Matt는 float: left/right그의 답변에서 언급 했지만 overflow: hidden.

jsfiddle 데모


편집 : 트로이 목마가 언급했듯이 새로 도입 된 CSS3 내장 및 외부 크기 조정 모듈 을 활용할 수도 있습니다 .

HTML :

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

CSS :

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

그러나 모든 인기있는 브라우저 버전이 작성 시점에이를 지원하는 것은 아닙니다 .


답변

zoom속성 시도

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

편집 : 분명히 FireFox는 zoom속성을 지원하지 않습니다 . 사용해야합니다.

-moz-transform: scale(0.5);

FireFox 용.


답변

또 다른 해결책은 다음을 사용하는 것입니다.

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

src속성이 필요 하기 때문에 유효성을 검사하지 않지만 작동합니다 ( srcset지원되지 않는 모든 버전의 IE 제외 ).


답변

이것은 실제로 가능하며 첫 번째 대규모 반응 형 디자인 사이트를 디자인하는 동안 우연히 얼마나 큰지 발견했습니다.

<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%; }

overflow : hidden은 clearfix 해킹을 사용하지 않고 플로팅 내용에도 불구하고 래퍼 높이와 너비를 제공합니다. 그런 다음 여백을 사용하여 콘텐츠를 배치 할 수 있습니다. 래퍼 div를 인라인 블록으로 만들 수도 있습니다.


답변

이것은 매우 오래된 스레드이지만 표준 해상도 디스플레이에서 레티 나 (고해상도) 화면 캡처를 표시하는 간단한 솔루션을 검색하는 동안 발견했습니다.

따라서 최신 브라우저를위한 HTML 전용 솔루션이 있습니다.

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

이것은 이미지가 의도 한 디스플레이 크기의 두 배라는 것을 브라우저에 알려줍니다. 값은 비례하며 이미지의 실제 크기를 반영 할 필요가 없습니다. 동일한 효과를 얻기 위해 2w 1px도 사용할 수 있습니다. src 속성은 레거시 브라우저에서만 사용됩니다.

그 좋은 효과는 레티 나 또는 표준 디스플레이에서 동일한 크기로 표시되고 후자에서는 축소된다는 것입니다.


답변

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. 
});

이 솔루션은 js 및 jquery를 사용하고 부모가 아닌 이미지 속성에 따라서 만 크기를 조정합니다. 클래스 및 ID 매개 변수를 사용하여 단일 이미지 또는 그룹의 크기를 조정할 수 있습니다.

자세한 내용은 여기로 이동하십시오 : https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5