IT

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

lottoking 2020. 9. 1. 07:43
반응형

자체 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.normal 와img.fake같은 이미지입니다.
브라우저 지원 참고 : 모든 브라우저css가 방법에서 사용되는 속성을지원하기 때문에 모든 브라우저에서 작동합니다.

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

  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: fixed및 min/max-width입니다. 각각 고유 한 부작용이 있지만 display: inline-block더 안전한 선택이 될 것입니다. Matt는 float: left/right그의 답변에서 언급 했지만 overflow: hidden.

jsfiddle 데모

편집 : trojan 에서 언급했듯이 새로 도입 된 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

이것은 어렵지 않은 접근 방식입니다.

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}

실제로 여기에있는 대부분의 답변은 이미지를 자체 너비로 조정하지 않습니다 .

img원래 크기로 시작할 수 있도록 요소 자체 에 너비와 높이가 자동 이어야합니다.

그 후 컨테이너 요소가 이미지 크기를 조정할 수 있습니다.

간단한 HTML 예 :

<figure>
    <img src="your-image@2x.png" />
</figure>

여기에 CSS 규칙이 있습니다. 이 경우 절대 컨테이너를 사용합니다.

figure {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5); 
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5);
    transform: scale(0.5);
    transform-origin: left;
} 

figure img {
    width: auto;
    height: auto;
}

와 같은 규칙을 사용하여 이미지 위치를 조정할 수 transform: translate(0%, -50%);있습니다.

나는 당신이 옳다고 생각합니다. 내가 아는 한 순수한 CSS로는 불가능합니다 (내 말은 크로스 브라우저가 아닙니다).

편집하다:

네 대답이별로 마음에 들지 않아서 조금 당황했습니다. 도움이 될 수있는 흥미로운 아이디어를 찾았을 수도 있습니다. 아마도 가능할 수도 있습니다 (가장 예쁜 것은 아니지만).

편집 : Chrome, FF 및 IE 8 & 9에서 테스트되고 작동합니다. . IE7에서는 작동하지 않습니다.

여기에 jsFiddle 예제

html :

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

css :

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}

참고 URL : https://stackoverflow.com/questions/8397049/css-image-resize-percentage-of-itself

반응형

'IT' 카테고리의 다른 글

C #에서 홈 디렉토리의 경로를 얻었습니까?  (0) 2020.09.01
IntelliJ의 "파일에서 찾기"를 생성 한 파일을 무시해야합니까?  (0) 2020.09.01
응답에서 이미지를 반환하는 방법은 무엇입니까?  (0) 2020.09.01
'return'키워드는 'forEach'함수 내에서 무엇을 의미합니까?  (0) 2020.09.01
Django에서 redis를 어떻게 사용할 수 있습니까?  (0) 2020.09.01

'IT'의 다른글

  • 현재글자체 CSS 이미지 크기 조정 비율?

관련글

댓글

티스토리툴바