css

2013-02-21 3 views
2

을 사용하여 원래 그림의 너비와 높이의 50 %를 설정하면 css를 사용하여 원본 그림의 너비와 높이의 50 %를 설정할 수있는 방법이 있습니까? 예를 들어이 코드가 있습니다css

<img src="http://content.captive-portal.com/files/ign/movie-news/content/2b.jpg"> 

내가 HTML에있는 너비와 높이를 지정하지 않은,하지만 난 그게 원래 높이와 너비의 50 %가되고 싶어요. CSS를 사용하여이를 수행 할 수 있습니까?

이 작동하지 않습니다이를 극복 할 수있는 방법은

img{width:50%; height:50%} 

있습니까? 감사합니다.

+0

적용 할 CSS 스타일이 작동해야합니다. 자세한 내용을 게시 할 수 있습니까? – otinanai

+4

너비를 50 %로 설정하면 이미지의 너비가 컨테이너의 너비의 50 %가됩니다. 원래 크기를 알아야합니다. – BenM

+0

이것은 JavaScript로 클라이언트 측에서만 할 수 있습니다. – Mooseman

답변

9

: jQuery를, 예를 들어, 그것은 매우 간단하게 CSS image resize percentage of itself?

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

놀라운 대답. 감사. 내 지식을 추가합니다. –

2

내 의견에 말했듯이. CSS에 width: 50%을 설정하면 이미지의 너비가 포함 된 요소의 50 %로만 설정됩니다.

JavaScript로 구현해야합니다. 여기에 설명 된대로 이미지를 확장 할 수 있습니다

$('img').each(function() { 
    var the_width = $(this).width(), 
     new_width = Math.round(the_width/2); 
    $(this).width(new_width); 
}); 
+4

JQuery를 강요해야하는 이유는 무엇입니까? – Jacob

+0

왜 안 되니? 업계 표준이되고 있으며,이 (사소한) 절차에 필요한 코드를 비교할 때 jQuery의 힘을 활용하는 것이 좋습니다. 물론, 한 가지 작업에 대한 전체 라이브러리를 포함하는 요점은 없지만, OP가 이미 그것을 사용하고 있다고 의심합니다. (내 말은, 누가 아니겠습니까?) ... – BenM

+0

@BenM은 당신의 도움에 감사드립니다. 이것도 시도해 보겠습니다 :) –

0

CSS ... myIMG {줌 : 50 %;}

인라인 CSS

 
    <IMG STYLE="zoom:50%;" SRC="..."> 

+0

달성하려는 목표는 무엇입니까? – romuleald