자체 비율로 img의 크기를 조정하려고합니다. 예를 들어 50 %로 크기를 조정하여 이미지를 절반으로 축소하고 싶습니다. 그러나 적용 width: 50%;하면 이미지 크기가 컨테이너 요소의 50 %로 조정됩니다 (예 : 상위 요소 <body>).
질문은 자바 스크립트 또는 서버 측을 사용하지 않고 자체 비율로 이미지 크기를 조정할 수 있습니까? (나는 이미지 크기에 대한 직접적인 정보가 없습니다)
나는 이것을 할 수 없다고 확신하지만 지능형 CSS 전용 솔루션이 있는지 확인하고 싶습니다. 감사!
답변:
두 가지 방법이 있습니다.
이 메서드는 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.
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%원래의 화상의 크기.transform:scale()해결책에는 큰 문제가 있습니다. CSS 상자 모델과 잘 상호 작용하지 않습니다. 있는 나는 그것과 상호 작용하지 않는 것을 의미 모두에서 모든 잘못을 보이는 레이아웃을 얻을 수 있도록. 참조 : jsfiddle.net/kahen/sGEkt/8
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%;
}<img src="https://www.google.com/images/srpr/logo11w.png"/> CSS : img { display: inline-block; width: 15%; }
figure입니다 width: fit-content;현재로서는. 오늘날 브라우저 지원도 훨씬 좋아졌습니다.
zoom속성 시도
<img src="..." style="zoom: 0.5" />편집 : 분명히 FireFox는 zoom속성을 지원하지 않습니다 . 사용해야합니다.
-moz-transform: scale(0.5);FireFox 용.
이것은 실제로 가능하며 첫 번째 대규모 반응 형 디자인 사이트를 디자인하는 동안 우연히 얼마나 큰지 발견했습니다.
<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에서는 작동하지 않습니다.
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%;
}inline-block너비가 #img_wrap내부 html 너비뿐만 아니라 컨텍스트 컨테이너 너비에도 의존하는 이유 입니다.
width: <number>%. 나는 그것을 할 방법이 없다고 생각합니다!