자체 비율로 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
가 method에서 사용되는 속성을 합니다.
이 방법은 다음과 같이 작동합니다.
#wrap
그리고#wrap img.fake
흐름이#wrap
갖는다overflow: hidden
(그 크기가 화상 내 동일되도록img.fake
)img.fake
유일한 요소는 내부#wrap
없이absolute
그것이 두 번째 단계를 중단하지 않도록 위치#img_wrap
보유absolute
위치 내부#wrap
(전체 소자 사이즈 연장#wrap
)- 네 번째 단계의 결과
#img_wrap
는 이미지와 동일한 크기입니다. - 설정
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
.
편집 : 트로이 목마가 언급했듯이 새로 도입 된 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