어린이가 100 % 너비가 아닌 경우에만 컨테이너에 패딩 추가 CSS

Question

그래서 이미지가있는 몇 개의 컨테이너를 잡고 이미지가 컨테이너 너비보다 작은 경우에만 컨테이너에 패딩을 추가하려고합니다. . 이것이 간단한 자바 스크립트 솔루션이 될 것이지만 CSS로 이것을 수행 할 수있는 방법이 있습니까?

예 HTML :

<div class="image-container"> 
    <img scr="my/path/to/image"/> 
</div> 
<div class="image-container"> 
    <img scr="my/path/to/image2"/> 
</div> 

CSS : http://grab.by/r1sS

Answer 1

그것을 : 내가 할 노력하고있어 더 나은 아이디어를 얻기 위해이 이미지를보세요 :)

몰라 CSS를 사용하여 이미지 크기에 따라 채우기를 추가 할 수 없습니다.

비록 당신이 제공 한 링크에서 이미지를 가운데에 맞추려고하는 것처럼 보입니다. 즉, 텍스트 정렬을 컨테이너의 중심으로 설정하여 하위 요소를 중심에 배치 할 수 있습니다. 이미지.

.image-container { 
    text-align: center; 
} 

원본 쿼리와 관련하여 CSS를 사용하여 이미지 크기에 따라 패딩을 추가 할 수 없습니다.

Answer 2

CSS에는 조건부가 없으므로 순수한 CSS에서 요구하는 정확한 조건을 적용 할 수있는 방법이 없습니다.

그러나 화면 캡처를 기반으로하면 패딩이 필요하지 않은 것처럼 보입니다. 왜 컬러 배경 위에 이미지의 중심을 두는 것이 좋을까요? 같은 일을 성취하지 않겠습니까?

이미지가 전체 너비이면 전체 배경을 덮고 컨테이너를 채 웁니다. 전체 너비가 아닌 경우 컨테이너 중앙에 배치됩니다.

컨테이너에서 이미지 중심과 배경 색상 적용하려면 : 당신은 또한 JS에서이 작업을 수행 할 수있는 방법을 추가 할 수 있습니다

.image-container { 
    text-align: center; 
    background-color: #777; 
}