축소판 이미지 스트레칭을 방지하는 방법은 무엇입니까?

Question

나는이 플러그인에서 이미지가 늘어나는 것을 막기 위해 몇 가지 방법을 시도했다.

.wpbdmthumbs img { 
max-height: 150px; 
max-width: 150px; 
} 

.wpbdmthumbs { 
height: 150px; 
width: 150px; 
} 

나는이 자바 스크립트를 시도이

.wpbdmthumbs img { 
max-height:400px; 
height: exp<b></b>ression(this.width > 400 ? 400: true); 
max-width:400px; 
width: exp<b></b>ression(this.width > 400 ? 400: true); 
} 

엄지 손가락이에 배치됩니다

<script type="text/javascript"> 
function load(path) 
{ 
temp=new Image(); 
temp.onload=function(){ 
var w=temp.width; 
var h=temp.height; 
var cnt=document.getElementById("wpbdmthumbs"); 
var fitto=(w>h)?w:h; 
var ratio=150/fitto; 
temp.width *=ratio; 
temp.height *=ratio; 
wpbdmthumbs.appendChild(temp) 
} 
temp.src=path; 
} 
</script> 

(다른 포럼에서 그것을 가지고, JS을 나도 몰라, 그래서 잘못 될 수 있음) 디렉토리 목록에서 비즈니스 디렉토리라는 플러그인을 Wordpress 발췌 페이지. 목록의 주 이미지를 원하는 크기 (300px는 내가 설정 한 것)로 설정하는 설정이 있지만 동일한 이미지가 발췌의 축소판으로 사용되고 너무 큰 같은 크기로 표시되므로 발췌 페이지. 그래서 나는 발췌의 엄지 손가락 크기를 150x150으로 제한하는 CSS를 가지고있다. 이미지는 전체 목록에서 왜곡되지 않지만 발췌본에서 왜곡됩니다.

당신은 좁은에 squishes하지만 충분히 키를 늘릴하지 않습니다, 그것은 넓은보다 키의 경우 150 픽셀 폭을 채우기 위해 더 넓은 이미지를 뻗어, 그리고 그것을 높이보다 넓은 경우 http://www.nextinthewest.com

에서 그것을 볼 수 있습니다 150px 높이를 채 웁니다.

잘못된 셀렉터를 사용하고있을 수도 있지만 여러 가지를 시도했습니다.

아마도 플러그인이 브라우저의 크기가 300px이고 너비가 넓어서 스트레칭을 방지하기 위해 어떤 CSS에서든지 작동하지 않을 수도 있습니다.

Answer 1

CSS에서는 플러그인에서 생성되는 CSS를 넘기를 원한다면 매우 희귀 한 !important의 올바른 사용이 필요합니다. !important의 올바른 사용의 이점은 플러그인을 직접 편집 할 수 없을 때 javascript가 CSS를 생성하는 것을 넘어서는 것입니다.

.wpbdmthumbs img { 
height: auto !important; 
width: auto !important; 
max-height: 150px !important; 
max-width: 150px !important; 
} 

.wpbdmthumbs { 
height: 150px !important; 
width: 150px !important; 
}