수직으로 컨테이너의 높이에 따라, 이미지를 중심으로

Question

편집 :

나는 수직으로 컨테이너의 높이에 따라, 이미지를 중심으로 어떻게

http://eclassified.my/service/242/9d3a89c9-09ae-49a5-ae8c-a4c3070c7ead

.

컨테이너 높이가 고정되어 있고 이미지 크기가 동적 인 경우를 가정 해 보겠습니다.

현재 오버 플로우 : 숨기기;를 사용하여 이미지의 상단 부분 만 표시됩니다.

감사

Answer 1

당신은 height: 100%에 이미지 CSS을 설정할 수 있습니다.

Google에서 문제를 해결할 수 있도록 몇 가지 코드를 제공해주십시오.

Answer 2

포토샵

가장 쉬운 해결책은 분명히 여기에 포토샵; 당신은 단지 이미지의 크기를 조정할 수 있습니다.

---

CSS

당신은이에 대한 CSS 속성 background-image을 사용할 수 있습니다. img 태그는 이미지의 일부를 숨기지 않고 크기를 조정하기 위해 만들어졌습니다.

이렇게하려면 다음 예제를 사용할 수 있습니다 : 속성이 슬라이드 쇼에 맞는 배경 이미지를 만들 수있는 열쇠임을

background-position: 0px -60px; 

. 하나; 모든 이미지에 대해 수동으로 변경해야합니다.

예 당신이 사용하기 위해 background-position :

.slider-nav-crop4 { 
 
    /*this is your image with ~60px white space above */ 
 
    background-image:url('http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: 0px -60px; 
 
}

<div class="crop-image slider-nav-crop4" style="border-radius:8px;display:inline-block;width:400px;height:300px;"> 
 
    
 
</div>

---

위치이 실제로 이미지에 따라 설정할 수있는 해킹 이미지

하지만, 조금 까다로울 수 있습니다.

이미지의 절대 위치를 지정하고 음수를 top으로 설정하고 이미지를 콘테이너보다 크게 만들 수 있습니다 (overflow:hidden).

예를

.item .crop-image { 
 
    height:200px; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 

 
.crop-image img { 
 
    position:absolute; 
 
    top:-40px; 
 
    height:300px; 
 
}

<div class="carousel-inner carousel-inner1" role="listbox" style="border-radius:8px;"> 
 

 
    <div class="item item1" style="border-radius:8px;"> 
 
    <div class="crop-image slider-nav-crop4" style="border-radius:8px;"> 
 
     <img src="http://eclassified.my/ec_admin/upload/service_upload/draft-bxkh1mt89q.jpg" alt="Second Slide"> 
 
    </div> 
 
    </div> 
 

 
    <div class="item item1 active left" style="border-radius:8px;"> 
 
    <div class="crop-image slider-nav-crop4" style="border-radius:8px;"> 
 
     <img src="http://eclassified.my/ec_admin/upload/service_upload/draft-guwz8z2ux1.jpg" alt="Second Slide"> 
 
    </div> 
 
    </div> 
 

 
    <div class="item item1 next left" style="border-radius:8px;"> 
 
    <div class="crop-image slider-nav-crop4" style="border-radius:8px;"> 
 
     <img src="http://eclassified.my/ec_admin/upload/service_upload/draft-83ytvl4obn.jpg" alt="Second Slide"> 
 
    </div> 
 
    </div> 
 
                  </div>

Answer 3

이 코드가 말할 수 있습니다,

<div class="image"> 
    <img scr="Image_path" alt="" /> 
</div> 

CSS

.image{ 
    position: relative; 
} 
.image img{ 
    margin: auto; //horizontally align center 
    position: absolute; //vertically align center 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

희망이 작동합니다.

Answer 4

방법 1 :

container { 
display: table; 
vertical align: middle; 
} 
img { 
display: table-cell; 
vertical align: middle; 
} 

방법 2 :

container { 
position: relative; 
} 
image { 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%,-50%); 
} 

방법 3 :

container { 
height: 300px; 
line-height: 300px; 
} 

CSS에서 수직 배향 매우 토론 된 주제이며, 이것은 많은 예제 중 3 가지입니다. 당신을 위해 최선을 사용하십시오.