부트 스트랩 응답 성 CSS 이미지 너비가 비뚤어지고 왜곡 됨

Question

부트 스트랩을 사용하여 페이지의 많은 부분을 차지하는 회전식 구성 요소를 사용하는 웹 사이트를 만듭니다. 브라우저 창 크기를 조정하고 뷰포트를 가로로 드래그하면 이미지 너비가 왜곡되어 왜곡됩니다. 나는 다양한 너비에 대한 미디어 쿼리와 함께 내 캐 러셀에 대해 다음과 같은 전반적인 CSS 스타일을 설정했습니다.

브라우저 규칙을 가로로 드래그 할 때 이미지 너비가 왜곡되지 않도록 .carousel .item 및 .carousel img에 적용 할 수있는 CSS 규칙 또는 속성에 대한 수정 사항이 있습니까? 내 생각에 width:100%;이 문제를 해결할 수 있습니까? 여기 http://www.the-session.co.uk/jen/

CSS를한다 : : 시도와

.carousel .item { 
    height: 900px; 
} 
.carousel img { 
    min-width: 100%; 
    height: 900px; 
} 

@media (max-width: 979px) { 

    .carousel .item { 
    height: 500px; 
    } 
    .carousel img { 
    width: auto; 
    height: 500px; 
    } 
} 


@media (max-width: 767px) { 

    .carousel .item { 
    height: 300px; 
    } 
    .carousel img { 
    height: 300px; 
    } 
} 

Answer 1

문제 여기

수평 브라우저를 리사이징 스큐 발생하는의 이미지입니다 : 웹 사이트는 여기

입니다 이미지의 비율을 유지하려면 이미지의 초기 가로 세로 비율을 유지하지 않는 것이 좋습니다.

대신 background-size: contain을 시도하십시오. 이렇게하면 브라우저가 이미지를 비례 적으로 비율 조정하여 이미지가 더 긴 축을 따라 컨테이너를 채우도록 지시합니다.

Answer 2

미디어 쿼리에서 높이 값이 잘못 설정되었습니다.

는

@media (max-width: 979px) { 

.carousel .item { 
    height: 750px; 
} 
    .carousel img { 
    width: auto; 
    height: 75 0px; 
} 
} 

@media (max-width: 767px) { 

    .carousel .item { 
    height: 600px; 
    } 
    .carousel img { 
    height: 600px; 
} 
} 

Answer 3

문제는 특정 높이를 정의 및/또는 폭 (레이아웃에 따라)되어 있다는 사실에 놓여있는은 다음 주 CSS에 IMG 높이 height:900px;로 설정되어 있기 때문에 다음을 수행해야 문제를 일으킨다. 디자인에서 허용하는 경우 "높이 : 900 픽셀" .carousel img ~ "높이 : 자동"에서 @media 파일을 변경하여 이미지가 왜곡되지 않도록하십시오.

그러나 원하는 결과가 실제 뷰포트를 채우기 위해 캐 러셀 이미지를 확장해야하는 경우 다른 솔루션이 필요하며 절대적으로 위치가 지정된 div를 채우기 위해 이미지를 배경 이미지로 변경해야 할 수 있습니다.