이미지 테두리가 120x120으로 유지되는 동안 이미지는 가로 세로 비율을 유지합니다.

Question

내 drupal 7 웹 사이트에서 달성하고자하는 목표는 이미지 이미지의 경계를 모든 이미지 (120x120)에 대해 일정 크기로 유지하면서 실제 이미지 자체는 이미지 스타일 (100x100)이며 중간 정렬됩니다. (명성 점수가 10 점이 아니기 때문에 예제 이미지를 제공 할 수 없습니다 ...)

인물 사진의 경우 높이는 100px로 제한되고 너비는 가로 세로 비율이됩니다 입니다. 너비가 100px로 제한되고 가로 세로 비율에 관계없이 가로 방향 이미지와 반대가됩니다.

모두 회색 테두리가 120x120 블록으로 유지되고 이미지 크기에 따라 변하지 않습니다.

내 웹 사이트의 코드가 필요하면 알려주십시오.

Answer 1

목표를 달성하는 가장 간단한 방법은 테두리, 높이 및 너비가 설정된 div에 vertical-align: middle의 디스플레이 속성 인 table-cell을 사용하는 것입니다. img가 max-width 및 max-height 속성을 100 %로 설정해야합니다. 따라서이 같은 HTML 구조를 갖는

<div class="img-container"> 
    <img src="..." /> 
</div> 

귀하의 CSS가 될 수있다 :

.img-container { 
    width: 120px; 
    height: 120px; 
    display: table-cell; 
    vertical-align: middle; 
} 

.img-container > img { 
    max-width: 100%; 
    max-height: 100%; 
    margin: 0 auto; 
    display: block; 
} 

Codepen는 결과를 보여주는 :