사진 및 자막 레이아웃 문제

Question

this page이 좁은 브라우저 창에 표시되면 페이지 하단에 사진 캡션이 표시 될 때 문제가 발생합니다. 당신이 볼 수 있듯이

는 캡션은 사진의 오른쪽 넘어 확장. 이상적으로는 사진이 캡션과 동일한 너비가되도록하고 싶지만 캡션을 사진의 너비에 맞게 좁게 만드는 것도 허용됩니다.

하나의 사진과 캡션에 대한 마크 업이

<div class="four columns"> 
    <div class="ft-work"> 
    <img src="images/slider/mum-daughter.jpg"> 
    <div class="ft-work-title text-center"> 
     <h5 class="alt-h">Caption??</h5> 
    </div> 
    </div> 
</div> 

는 나는이 규칙

#featured-work-slider img { 
    width: auto !important; 
} 

를 제거하면 사진의 폭이 캡션을 일치하지만 이미지가 무섭게 뻗어 보이는 것을 발견 .

Answer 1

나는 당신의 스타일에이 규칙을 참조하십시오.

#featured-work-slider img { 
    display: inline-block !important; 
    width: 100%; 
    height: auto; 
} 

Answer 2

언급 한대로 모바일 레이아웃의 이미지에서 width: auto !important;을 제거하십시오. 그런 다음 가로 세로 비율이 정확하려면이 추가 : 다음에 (모바일 및 데스크톱 크기) 나를 위해 트릭을 그것을 않았다 전환

#featured-work-slider img { 
    display: inline-block !important; 
    width: auto !important; 
} 

: height: 100%;