이미지 높이를 컨테이너의 75 %로 설정하십시오.

응답 성있는 이미지 목록이 있습니다. 각 이미지는 컨테이너 안에 있습니다. 1이미지 높이를 컨테이너의 75 %로 설정하십시오.

I 이미지 컨테이너 백분율 폭 작은 연주하지만 느낌 : I 이미지 컨테이너는 제 1 용기 (이 경우 단위 용기)의 75 %로 할

화상 배급 1 인 이것은 해결책이 아닙니다.

<ul class="list-inline unit_list "> 
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8"> 
    <a href='#' alt="unit"> 
     <div class="unit_container"> 
      <div class="icon_container unit_icon"> 
       <img class="img-responsive unit_image" src="http://placehold.it/60X60" /> 
      </div> 
      <div class="unit_name">FREE</div> 
     </div> 
    </a> 
</li></ul>

Btw 나는 문제가되는 경우 부트 스트랩을 사용하고 있습니다. 여기에서 논리를 사용

는

http://jsfiddle.net/wmu3w3ej/1/

출처

2014-09-23 user2587454

Flopet 응답에 동의하십시오. http://jsfiddle.net/sameerast/wmu3w3ej/3/ –

'transform : scale (0.75);'를'.unit_image'로 변경 하시겠습니까? - http://jsfiddle.net/rtndqhys/ – Anonymous

@SameeraThilakasiri 부모는 명시적인 키가 없기 때문에이 경우 아무런 효과가 없습니다. –

덕분에 나는 너무 간단하기 때문에 그것을 사용하는 것이 조금 무서워.

의견이 있으십니까?

출처

2014-09-23 14:29:42 user2587454

이것은 보통 당신이 질문하는 곳이 아닌, 그들 자신에게도 대답한다. Transform은 최신 브라우저에 대한 훌륭한 지원을 통해 여기에있는 문제와이를 지원하는 브라우저를 확인합니다. http://caniuse.com/#search=transform – Christina

죄송합니다. :) 감사합니다! – user2587454

: 부모에 상대적 위치를 추가 http://jsfiddle.net/phwaLmen/1/

#wrapper 
 
{ 
 
    position: relative; 
 
    width: 50%; 
 
    overflow: hidden; 
 
} 
 

 
#wrapper:before 
 
{ 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 75%; 
 
} 
 

 
#image 
 
{ 
 
    position: absolute; 
 
    top:  0; 
 
    left:  0; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div id="wrapper"> 
 
    <img src="http://placehold.it/350x350" id="image"> 
 
</div>

설정 : https://stackoverflow.com/a/20117454/3389737

나는 상황에 적용했습니다 그 너비가 너와 같이 되길 원한다. 오버플로가 숨겨져 있습니다.

패딩 상단이 75 % 인 래퍼에 대해 :before 요소를 만듭니다. #wrapper에 지정된 높이가 없으므로,이 75 %는 요소의 너비를 기준으로합니다.

그런 다음 이미지를 배치하고 절대적으로 배치 한 다음 컨테이너에 맞 춥니 다. 크기가 조정되지 않고 이미지가 잘 리도록하려면 height: 100% 및 width: 100% 스타일 규칙을 제거하십시오.

출처

2014-09-23 08:14:32 Luke

감사합니다.하지만이 이미지를 가로 세로 비율 1 : 1로 유지하지 않습니다. – user2587454

75 %를 요구 했으므로 그 비율의 이미지를 사용하지 않으면 1 : 1로 표시되지 않습니까?또한 이미지에 마지막 두 스타일을 제거하면 크기 조정 대신 자르기됩니다. – Luke

맞아. 여자애. 나는 내 질문을 편집했다. – user2587454

당신은 (당신의 HTML에서) 이런 식으로 작업을 수행 할 수 있습니다

<img src="img.jpg" height="75%" />

행운을 빕니다!

마법

같은 @Mary 멜로디

transform: scale(0.75);

작품

출처

2014-09-23 08:28:00

이미지 높이를 컨테이너의 75 %로 설정하십시오.

답변

관련 문제